/* Fairway Live design tokens — a yardage book, not Augusta green-and-gold.
   Cream card stock, pencil graphite, one red for LIVE and nothing else.
   Built light-first: direct sun destroys dark UIs. */

:root {
  /* Palette */
  --pine:     #14342B;  /* primary surface accents, headers */
  --fescue:   #7A8B5C;  /* secondary, off-air states */
  --card:     #F2EDE1;  /* scorecard stock — app background */
  --graphite: #2E2E2C;  /* body text, pencil */
  --flag:     #C4443A;  /* LIVE only. Nothing else gets this color. */
  --sand:     #E4D9C0;  /* dividers, row separators */

  /* Derived */
  --pine-ink:   #0d221c;
  --card-hi:    #FBF8F0;  /* raised cards over the stock */
  --fescue-dim: #9AA986;
  --graphite-2: #5b5b56;  /* secondary text, still ≥4.5:1 on card */

  /* Type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Public Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Scale */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 36px;

  --radius: 12px;
  --radius-lg: 18px;

  /* Touch: gloved, sweaty hands → 56px minimum targets. */
  --tap: 56px;

  --shadow: 0 1px 2px rgba(20, 52, 43, 0.08), 0 6px 20px rgba(20, 52, 43, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--card);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  /* Respect notches and the fold's varying safe areas. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -0.01em; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

a { color: var(--pine); }

/* Focus visibility for keyboard users. */
:focus-visible { outline: 3px solid var(--fescue); outline-offset: 2px; }