/* Winners — design tokens (extracted from the Winners design system)

   Theming: `:root` holds the DARK theme (the brand default). The light "paper"
   theme is an override block keyed on `[data-theme="light"]` (set on <html> by
   the no-flash snippet in each page's <head>, toggled by js/main.js).

   Rules for adding colors anywhere in this site:
   - never hardcode a hex/rgba in a page <style> block if a token fits
   - `--wn-lime` is a FILL (ink text sits on it) — for lime *text* use
     `--wn-lime-text`, which darkens to a readable green on paper
   - `rgba(255,255,255,a)` hairlines/fills must come from `--wn-border-*` or
     `--wn-fill-*` so they can flip to `rgba(11,11,12,a)` on paper
   - scrims that sit on top of photos/video (`--wn-scrim*`) stay dark in both
     themes on purpose — they're read against the image, not the page
*/
:root {
  color-scheme: dark;

  /* ---- Canvas & surfaces ---- */
  --wn-bg:            #0a0908;
  --wn-bg-alt:        #0b0b0c;
  --wn-surface:       #141210;
  --wn-surface-2:     #141416;
  --wn-input:         #161311;
  --wn-media-bg:      #161618;
  --wn-surface-deep:  #0e0d0b;   /* inset panels (darker than the canvas) */
  --wn-surface-raised:#1b1c1f;   /* featured cards */
  --wn-surface-hover: #1a1613;   /* row / tile hover */
  --wn-nav-bg:        rgba(10,9,8,0.78);
  --wn-nav-bg-solid:  #0a0908;

  /* ---- Lime accent ---- */
  --wn-lime:          #AFFF2C;
  --wn-lime-hi:       #c9ff6b;
  --wn-lime-lo:       #8fd91f;
  --wn-lime-text:     #AFFF2C;   /* lime used as TEXT / glyph color */
  --wn-lime-line:     #AFFF2C;   /* lime used as a 1px BORDER */
  --wn-lime-deep:     #8fd91f;

  /* ---- Text ---- */
  --wn-text-strong:   #f6f6f4;
  --wn-text:          #ece9e2;
  --wn-text-2:        #c3bfb5;
  --wn-text-muted:    #a39f96;
  --wn-text-faint:    #75726b;
  --wn-text-dim:      #5f5c57;
  --wn-text-mono:     #8a8681;
  --wn-text-mono-2:   #8a8a8f;

  /* ---- Borders ---- */
  --wn-border-faint:  rgba(255,255,255,0.05);
  --wn-border:        rgba(255,255,255,0.09);
  --wn-border-2:      rgba(255,255,255,0.10);
  --wn-border-3:      rgba(255,255,255,0.12);
  --wn-border-4:      rgba(255,255,255,0.16);
  --wn-border-5:      rgba(255,255,255,0.25);
  --wn-border-lime:   rgba(175,255,44,0.40);
  --wn-border-lime-2: rgba(175,255,44,0.50);
  --wn-border-lime-3: rgba(175,255,44,0.30);

  /* ---- Neutral fills (tinted panels, chips, hover states) ---- */
  --wn-fill-1:        rgba(255,255,255,0.04);
  --wn-fill-2:        rgba(255,255,255,0.06);
  --wn-fill-3:        rgba(255,255,255,0.08);
  --wn-fill-4:        rgba(255,255,255,0.12);
  --wn-fill-5:        rgba(255,255,255,0.16);
  --wn-hatch-1:       rgba(255,255,255,0.05);
  --wn-hatch-2:       rgba(255,255,255,0.015);

  /* ---- Lime washes (faint accent backgrounds) ---- */
  --wn-lime-wash-1:   rgba(175,255,44,0.04);
  --wn-lime-wash-2:   rgba(175,255,44,0.08);
  --wn-lime-wash-3:   rgba(175,255,44,0.12);
  --wn-grad-lime-wash: linear-gradient(180deg,rgba(175,255,44,0.05),rgba(175,255,44,0));

  --wn-lime-glow:     rgba(175,255,44,0.6);
  --wn-lime-step-1:   rgba(175,255,44,0.35);
  --wn-lime-step-2:   rgba(175,255,44,0.55);
  --wn-lime-step-3:   rgba(175,255,44,0.78);
  --wn-shadow-md:     0 20px 50px -18px rgba(0,0,0,0.8);
  --wn-shadow-lg:     0 24px 60px -34px rgba(0,0,0,0.7);

  /* ---- Scrims (over media — dark in both themes) ---- */
  --wn-scrim:         rgba(0,0,0,0.6);
  --wn-scrim-strong:  rgba(0,0,0,0.8);
  --wn-scrim-label:   #d8d8d8;

  /* ---- Semantic ---- */
  --wn-success:       #7fd42a;
  --wn-negative:      #8a6f6f;

  /* ---- Fixed pair: ink on lime (identical in both themes) ---- */
  --wn-paper:         #f4f3ee;
  --wn-ink:           #0b0b0c;
  --wn-ink-2:         #3a3a3e;
  --wn-ink-3:         #5a5a5e;
  --wn-on-lime:       #0b0b0c;
  --wn-on-lime-2:     #1a1a12;
  --wn-paper-border:  rgba(11,11,12,0.12);

  /* ---- Type ---- */
  --wn-font-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --wn-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --wn-fs-display:   clamp(42px, 5.2vw, 76px);
  --wn-lh-display:   0.97;
  --wn-ls-display:   -0.035em;
  --wn-fs-h2:        clamp(30px, 4vw, 52px);
  --wn-lh-h2:        1.0;
  --wn-ls-h2:        -0.03em;
  --wn-fs-h3:        24px;
  --wn-ls-h3:        -0.02em;
  --wn-fs-lede:      clamp(17px, 1.4vw, 19px);
  --wn-lh-lede:      1.55;
  --wn-fs-body:      15px;
  --wn-lh-body:      1.5;
  --wn-fs-small:     13.5px;
  --wn-fs-eyebrow:   12px;
  --wn-ls-eyebrow:   0.16em;
  --wn-fs-mono:      11px;
  --wn-ls-mono:      0.12em;

  /* ---- Layout ---- */
  --wn-maxw:        1200px;
  --wn-maxw-narrow: 1000px;
  --wn-gutter:      40px;

  /* ---- Radii ---- */
  --wn-r-xs:   6px;
  --wn-r-sm:   8px;
  --wn-r-md:   9px;
  --wn-r-lg:   12px;
  --wn-r-xl:   14px;
  --wn-r-2xl:  16px;
  --wn-r-3xl:  18px;
  --wn-r-4xl:  20px;

  /* ---- Effects: glass-3D buttons ---- */
  --wn-btn-lime-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 5px rgba(60,110,0,0.3),
    0 8px 20px -6px rgba(175,255,44,0.5),
    0 2px 4px rgba(0,0,0,0.35);
  --wn-btn-lime-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -2px 5px rgba(60,110,0,0.3),
    0 14px 30px -6px rgba(175,255,44,0.65),
    0 3px 6px rgba(0,0,0,0.4);
  --wn-btn-dark-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -2px 5px rgba(0,0,0,0.5),
    0 10px 24px -8px rgba(0,0,0,0.55),
    0 2px 5px rgba(0,0,0,0.4);
  --wn-btn-dark-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -2px 5px rgba(0,0,0,0.5),
    0 16px 34px -8px rgba(0,0,0,0.65),
    0 3px 6px rgba(0,0,0,0.45);
  --wn-btn-white-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 5px rgba(0,0,0,0.08),
    0 8px 20px -8px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.3);
  --wn-btn-white-border: rgba(255,255,255,0.6);
  --wn-btn-glass-bg: linear-gradient(180deg,rgba(255,255,255,0.14) 0%,rgba(255,255,255,0.06) 55%,rgba(255,255,255,0.02) 100%);
  --wn-btn-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 22px -10px rgba(0,0,0,0.6);
  --wn-btn-glass-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.3), 0 14px 30px -10px rgba(0,0,0,0.7);
  --wn-btn-glass-border: rgba(255,255,255,0.16);
  --wn-btn-ink-shadow: 0 10px 24px -10px rgba(0,0,0,0.5);

  --wn-grad-lime: linear-gradient(180deg,#c9ff6b 0%,#AFFF2C 52%,#8fd91f 100%);
  --wn-grad-dark: linear-gradient(180deg,#2a2a26 0%,#111110 60%,#050505 100%);
  --wn-grad-white: linear-gradient(180deg,#ffffff 0%,#f0f0ec 55%,#dcdcd6 100%);

  --wn-card-shadow: 0 24px 60px -30px rgba(0,0,0,0.6);
  --wn-panel-shadow: 0 30px 70px -40px rgba(0,0,0,0.8);

  /* ---- Motion ---- */
  --wn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wn-dur: .15s;
  --wn-dur-accordion: .3s;
  --wn-dur-theme: .28s;
}

/* ==========================================================================
   Light "paper" theme
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  /* ---- Canvas & surfaces ---- */
  --wn-bg:            #f4f3ee;
  --wn-bg-alt:        #eeede6;
  --wn-surface:       #ffffff;
  --wn-surface-2:     #fbfaf6;
  --wn-input:         #ffffff;
  --wn-media-bg:      #e7e6e0;
  --wn-surface-deep:  #ffffff;   /* on paper an inset panel reads as lifted white */
  --wn-surface-raised:#ffffff;
  --wn-surface-hover: #f8f7f2;
  --wn-nav-bg:        rgba(244,243,238,0.82);
  --wn-nav-bg-solid:  #f4f3ee;

  /* ---- Lime accent: fills keep the brand lime, text darkens to stay legible ---- */
  --wn-lime-text:     #4d7a00;
  --wn-lime-line:     #8ec400;
  --wn-lime-deep:     #6d9c07;

  /* ---- Text ---- */
  --wn-text-strong:   #0b0b0c;
  --wn-text:          #1d1c1a;
  --wn-text-2:        #3d3b36;
  --wn-text-muted:    #56534d;
  --wn-text-faint:    #6d6a63;
  --wn-text-dim:      #6f6c65;
  --wn-text-mono:     #6d6a63;
  --wn-text-mono-2:   #6a6a70;

  /* ---- Borders ---- */
  --wn-border-faint:  rgba(11,11,12,0.07);
  --wn-border:        rgba(11,11,12,0.10);
  --wn-border-2:      rgba(11,11,12,0.12);
  --wn-border-3:      rgba(11,11,12,0.15);
  --wn-border-4:      rgba(11,11,12,0.18);
  --wn-border-5:      rgba(11,11,12,0.24);
  --wn-border-lime:   rgba(122,178,0,0.50);
  --wn-border-lime-2: rgba(122,178,0,0.60);
  --wn-border-lime-3: rgba(122,178,0,0.38);

  /* ---- Neutral fills ---- */
  --wn-fill-1:        rgba(11,11,12,0.035);
  --wn-fill-2:        rgba(11,11,12,0.05);
  --wn-fill-3:        rgba(11,11,12,0.065);
  --wn-fill-4:        rgba(11,11,12,0.09);
  --wn-fill-5:        rgba(11,11,12,0.12);
  --wn-hatch-1:       rgba(11,11,12,0.05);
  --wn-hatch-2:       rgba(11,11,12,0.015);

  /* ---- Lime washes (deepened — pure lime at low alpha vanishes on paper) ---- */
  --wn-lime-wash-1:   rgba(139,199,0,0.09);
  --wn-lime-wash-2:   rgba(139,199,0,0.14);
  --wn-lime-wash-3:   rgba(139,199,0,0.20);
  --wn-grad-lime-wash: linear-gradient(180deg,rgba(139,199,0,0.12),rgba(139,199,0,0));
  --wn-lime-glow:     rgba(122,178,0,0.45);
  --wn-lime-step-1:   rgba(139,199,0,0.32);
  --wn-lime-step-2:   rgba(139,199,0,0.58);
  --wn-lime-step-3:   rgba(139,199,0,0.85);
  --wn-shadow-md:     0 18px 40px -20px rgba(11,11,12,0.26);
  --wn-shadow-lg:     0 22px 50px -32px rgba(11,11,12,0.3);

  /* ---- Semantic ---- */
  --wn-success:       #43790b;
  --wn-negative:      #8a5f5f;

  /* ---- Effects: shorter, softer shadows read as "paper", not "glow" ---- */
  --wn-btn-lime-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -2px 5px rgba(60,110,0,0.22),
    0 8px 18px -8px rgba(110,160,0,0.55),
    0 1px 2px rgba(11,11,12,0.14);
  --wn-btn-lime-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -2px 5px rgba(60,110,0,0.22),
    0 14px 26px -8px rgba(110,160,0,0.6),
    0 2px 4px rgba(11,11,12,0.16);
  --wn-btn-dark-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 5px rgba(0,0,0,0.5),
    0 10px 22px -10px rgba(11,11,12,0.5),
    0 1px 3px rgba(11,11,12,0.2);
  --wn-btn-dark-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -2px 5px rgba(0,0,0,0.5),
    0 16px 30px -10px rgba(11,11,12,0.55),
    0 2px 5px rgba(11,11,12,0.22);
  --wn-btn-white-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 5px rgba(11,11,12,0.06),
    0 8px 18px -10px rgba(11,11,12,0.3),
    0 1px 2px rgba(11,11,12,0.1);
  --wn-btn-white-border: rgba(11,11,12,0.14);
  --wn-btn-glass-bg: linear-gradient(180deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.55) 55%,rgba(11,11,12,0.02) 100%);
  --wn-btn-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 20px -12px rgba(11,11,12,0.3);
  --wn-btn-glass-shadow-hover: inset 0 1px 0 rgba(255,255,255,1), 0 14px 28px -12px rgba(11,11,12,0.36);
  --wn-btn-glass-border: rgba(11,11,12,0.14);
  --wn-btn-ink-shadow: 0 10px 22px -12px rgba(11,11,12,0.45);

  --wn-card-shadow: 0 22px 50px -30px rgba(11,11,12,0.28);
  --wn-panel-shadow: 0 26px 60px -38px rgba(11,11,12,0.34);
}
