/* FairwaySync design tokens — "augusta morning": ivory and tournament green, major-Sunday calm.
   Deep green-black ground under a soft fairway-green glow, glossy raised
   surfaces, one red for LIVE and nothing else.

   The variable NAMES kept their original semantic roles so every component and
   inline style flips with the theme:
     --pine      = primary accent (headings, links, selected states)
     --pine-ink  = ink ON the accent (button labels)
     --card      = the page ground
     --card-hi   = raised surfaces
     --graphite  = body text        --graphite-2 = secondary text
     --sand      = hairlines/borders
     --fescue    = secondary/off-air */

:root {
  /* Palette */
  --pine:     #0E5C41;  /* fairway green — the accent everything keys off */
  --fescue:   #7E8F6E;  /* muted sage — secondary, off-air states */
  --card:     #F5F3EB;  /* page ground: green-black */
  --graphite: #24261F;  /* body text — near-white */
  --flag:     #C0392F;  /* LIVE only. Nothing else gets this color. */
  --sand:     #E0DBC8;  /* dividers, hairlines, quiet borders */

  /* Derived */
  --pine-ink:   #F7F5EC;  /* dark ink on bright-green surfaces */
  --card-hi:    #FDFCF7;  /* raised card top */
  --card-lo:    #F1EEE2;  /* raised card bottom (gradient pair) */
  --field:      #FFFFFF;  /* recessed input wells */
  --fescue-dim: #A3B094;
  --graphite-2: #5C6156;  /* secondary text, ≥4.5:1 on raised cards */

  /* Accent gradient (buttons, selected chips) */
  --accent-hi: #17755A;
  --accent-lo: #093E2C;
  --glow:      rgba(14, 92, 65, 0.16);

  /* Secondary + live button gradients, and their ink. */
  --sec-hi: #8A9B76;  --sec-lo: #67785A;  --sec-ink: #F7FAF0;
  --flag-hi: #CE5044; --flag-lo: #A32A21; --flag-ink: #FFF4F2;
  --fescue-hi: #94A483; --fescue-lo: #66765A;
  --halve-hi: #46483F;  --halve-lo: #2C2E27;

  /* 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;

  /* Layered depth: a tight contact shadow + a long soft one + a glossy top edge. */
  --shadow: 0 1px 3px rgba(56, 48, 34, 0.1), 0 12px 28px rgba(56, 48, 34, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --shadow-lift: 0 3px 8px rgba(56, 48, 34, 0.12), 0 18px 38px rgba(56, 48, 34, 0.16),
                 0 0 22px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: 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;
  /* One ambient effect: a green range-light over the top of the page, on a
     faint grid — everything else gets its depth from the surfaces. */
  background-image:
    radial-gradient(95vmax 62vmax at 50% -14%,
      rgba(255, 253, 245, 0.92),
      rgba(255, 253, 245, 0.25) 45%,
      rgba(56, 48, 34, 0.06) 100%),
    linear-gradient(rgba(56, 48, 34, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 48, 34, 0.035) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  background-attachment: fixed, scroll, scroll;
  /* 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(--pine); outline-offset: 2px; }