/* ============================================================
   MOSS PADELKLUBB — DESIGN TOKENS
   Carried over unchanged from the approved sketch.
   Navy is the primary brand colour, lime the single accent,
   warm paper the light ground.
   ============================================================ */
:root {
  /* --- Brand ------------------------------------------------ */
  --lime:        #B6E82F;
  --lime-bright: #C8F94A;
  --lime-deep:   #6E9313;
  /* --lime-deep measured 3.26:1 on paper — under the 4.5 floor for
     small text. This is the darkest lime that clears it, for fixed
     light grounds that cannot switch to the bright accent. */
  --lime-text:   #435A0A;
  --lime-ink:    #24310A;

  --navy:        #1F2560;
  --navy-2:      #2C3375;
  --navy-3:      #3B4288;
  --navy-deep:   #161B4C;
  --navy-ink:    #ECEEF8;

  --ink:         #16160F;
  --ink-soft:    #2A2A22;

  /* --- Warm neutral ramp ------------------------------------ */
  --n-0:   #FFFFFF;
  --paper: #F5F4EE;
  --n-100: #ECEAE2;
  --n-200: #DEDBCF;
  --n-300: #C6C2B4;
  --n-400: #A6A292;
  --n-500: #817E70;
  --n-600: #5E5C51;
  --n-700: #403F37;
  --n-800: #26261F;
  --n-900: #16160F;

  /* --- Semantic --------------------------------------------- */
  --text-strong:   var(--ink);
  --text-body:     var(--n-800);
  --text-muted:    var(--n-600);
  --text-on-dark:  #ECEEF8;
  --text-on-lime:  var(--lime-ink);

  --border-subtle: var(--n-200);
  --border-hair:   var(--n-300);
  --border-ink:    var(--ink);
  --border-navy:   var(--navy-3);

  /* --- Type ------------------------------------------------- */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-label:   'Barlow Semi Condensed', 'Barlow', sans-serif;
  --font-cond:    'Barlow Condensed', 'Barlow', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --tracking-label: 0.14em;
  --tracking-btn:   0.08em;

  /* --- One spacing rhythm. Every gap on the page is from here.
         The old sketch used free-form clamps per section, which is
         what made the page read as loose floating parts. --------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  56px;
  --sp-9:  72px;
  --sp-10: 96px;

  /* Vertical rhythm for section bands — identical in every version */
  --band-y: 56px;
  /* --gutter places the rails; --pad holds the content off them, so
     nothing ever sits hard against a line or runs through one. */
  --gutter: 20px;
  --pad: 18px;
  --container: 1200px;

  /* --- Structure -------------------------------------------- */
  --hair: 1px;
  --rule: 2px;
  --r-sm: 6px;
  --r-pill: 999px;

  --control-sm: 34px;
  --control-md: 44px;
  --control-lg: 54px;

  --dur: 180ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Signature notch from the sketch's Pennant */
  --pennant: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);

  /* ==========================================================
     THEME LAYER
     The site is dark, always. The club owns a full light palette
     and a full dark one, and the design was built to carry both,
     but the dark one is what ships — so the dark values are the
     ones in :root and nothing here reads the reader's setting.

     Everything below is semantic: --ground is the page, --invert
     is the opposite material, and the offer card is always made
     of --invert so it reads as the one different surface on the
     page. The light palette is kept below the fold of this file,
     inert, as the hook a theme toggle would need.
     ========================================================== */
  color-scheme: dark;

  --ground:            var(--navy-deep);
  --ground-2:          var(--navy);
  --ground-rail:       var(--navy-3);
  --ground-rule:       var(--navy-3);
  --on-ground:         var(--text-on-dark);
  --on-ground-strong:  var(--text-on-dark);
  --on-ground-muted:   rgba(236, 238, 248, 0.66);
  --on-ground-faint:   rgba(236, 238, 248, 0.52);

  --invert:            var(--paper);
  --invert-2:          var(--n-0);
  --invert-rail:       var(--border-subtle);
  --on-invert:         var(--text-body);
  --on-invert-muted:   var(--text-muted);

  /* The accent that reads as "value" on the page ground. Lime is
     too light to carry text on paper, so the dark ground uses the
     bright lime and anything sitting on paper uses the deep one. */
  --accent-figure:     var(--lime);
  --accent-on-ground:  var(--lime);
  --accent-on-invert:  #55730E;
  --focus-ring:        var(--n-0);
  --focus-halo:        var(--lime);
}

/* The light palette, intact but inert: nothing sets data-theme, so
   this never applies. It is here so that adding a toggle is a few
   lines of JS rather than rebuilding a palette — the design names no
   literal colours anywhere, so flipping these tokens flips the page.
   Delete it if the club is certain the site stays dark. */
:root[data-theme='light'] {
  color-scheme: light;

  --ground:            var(--paper);
  --ground-2:          var(--n-0);
  --ground-rail:       var(--border-subtle);
  --ground-rule:       var(--border-hair);
  --on-ground:         var(--text-body);
  --on-ground-strong:  var(--ink);
  --on-ground-muted:   var(--text-muted);
  --on-ground-faint:   var(--n-500);

  --invert:            var(--navy);
  --invert-2:          var(--navy-deep);
  --invert-rail:       var(--navy-3);
  --on-invert:         var(--text-on-dark);
  --on-invert-muted:   rgba(236, 238, 248, 0.66);

  --accent-figure:     var(--lime-deep);
  --accent-on-ground:  #55730E;
  --accent-on-invert:  var(--lime);
  --focus-ring:        var(--ink);
  --focus-halo:        var(--lime-bright);
}

@media (min-width: 900px) {
  :root { --band-y: 72px; --gutter: 40px; --pad: 32px; }
}