/* ==========================================================================
   TRUE FANS: BRAND TOKENS · Main theme "Floodlight" v1 (option 2a)
   --------------------------------------------------------------------------
   This is the only file a designer needs to touch to re-skin the landing
   page. index.html holds the copy, site_v1.css holds the layout, and every
   colour, font, radius, gradient and shadow comes from the variables below.
   How to swap in a new brand: app/landing/README.md.

   v1 changes from v0.2 "Floodlight & Chalk":
   - Mono accent: Floodlight lime replaces yellow. Flare orange removed.
   - Square corners and 2px rules throughout (Modernist structure).
   - No blues: status-info is now a neutral chalk tint. The chart palette
     keeps Okabe-Ito sky blue (chart-2) for colour-blind safety; swap it if
     the brand must exclude blue entirely.
   - Light theme added: set data-theme="light" on <html>.

   Handy rule: change the "Core" and "Accent" colours first. Everything in
   "Derived" and "Fan cards" is built from them automatically, and can be
   overridden individually if the brand kit calls for it.

   Contrast (WCAG 2.x), dark: text 16.28:1 on bg, muted 8.72:1 on bg /
   8.31:1 on surface, on-accent 13.54:1 on primary / 16.28:1 on secondary /
   8.57:1 on tertiary, strong border 4.76:1.
   Light: text 15.68:1, muted 7.50:1 / 6.87:1 on surface, primary-text
   6.25:1, on-primary 12.85:1, strong border 4.89:1.
   ========================================================================== */

/* 1. FONTS ---------------------------------------------------------------
   All SIL Open Font License 1.1 (licences in fonts/), Latin and Latin
   Extended. Self-hosted from fonts/ so the page contacts no third party:
   the site's Content-Security-Policy only allows fonts from its own origin.
   To change fonts: put the new .woff2 files (and their licence) in fonts/,
   replace the @font-face rules below, and update --font-* in section 2. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {

  /* 2. TYPOGRAPHY -------------------------------------------------------- */
  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; /* headlines, logo, big numbers */
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; /* everything else */
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace; /* Fan ID, points, Founding Fan No. */
  --weight-body:     400;
  --weight-strong:   600;  /* buttons, badges, sub-headings */
  --weight-display:  800;  /* headlines, logo, big numbers */
  --tracking-display: -0.01em; /* letter-spacing on headlines */
  --tracking-heading: 0.02em;  /* letter-spacing on sub-headings, logo */
  --leading-display:  0.9;     /* line-height on headlines */
  --case-display:     uppercase; /* text-transform on headlines */

  /* 3. CORE COLOURS (dark, default) -------------------------------------- */
  --brand-bg:             #11140F; /* page background (Night) */
  --brand-surface:        #171914; /* alternate bands, inputs */
  --brand-surface-raised: #20231C; /* raised tiles, badge tiles */
  --brand-border:         #383C34; /* decorative dividers only, 1.65:1 */
  --brand-border-strong:  #7D8376; /* input + control outlines, 4.76:1 */
  --brand-rule:           color-mix(in srgb, var(--brand-text) 40%, transparent); /* 2px section rules */
  --brand-text:           #EEF1EA; /* main text (Chalk) */
  --brand-text-muted:     #ADB4A6; /* secondary text */

  /* 4. ACCENT COLOURS ---------------------------------------------------- */
  --brand-primary:    #B1EF4A; /* Floodlight lime: buttons, logo slab, step numbers, focus ring. Fill only on light theme */
  --brand-secondary:  #EEF1EA; /* Chalk: secondary fills (mono scheme, no second hue) */
  --brand-tertiary:   #5AC663; /* Pitch: motif, tags, illustration */
  --brand-on-accent:  #11140F; /* text that sits on a filled accent colour */

  /* 5. SHAPE ------------------------------------------------------------- */
  --radius-pill: 0;  /* buttons, inputs, badges (name kept for compatibility) */
  --radius-card: 0;  /* fan cards */
  --radius-tile: 0;  /* feature tiles */
  --border-width:      2px;
  --border-width-thin: 1px;
  --accent-rule:       4px; /* line above each "how it works" step */

  /* 6. DERIVED (built from the colours above; override if needed) -------- */
  --brand-primary-hover: #C9FC82; /* 15.68:1 with on-accent */
  --hero-glow-1:  color-mix(in srgb, var(--brand-primary) 14%, transparent);   /* floodlight wash from above */
  --hero-glow-2:  color-mix(in srgb, var(--brand-tertiary) 6%, transparent);
  --badge-bg:     color-mix(in srgb, black 25%, transparent);
  --card-shine:   color-mix(in srgb, white 45%, transparent);
  --shadow-card:  0 12px 32px rgba(0, 0, 0, 0.55),
                  inset 0 0 0 2px color-mix(in srgb, white 8%, transparent);

  /* 7. FAN CARDS (hero) -------------------------------------------------- */
  --card-1-bg: repeating-linear-gradient(90deg,
                 color-mix(in srgb, var(--brand-primary) 10%, var(--brand-surface)) 0 34px,
                 color-mix(in srgb, var(--brand-primary) 4%,  var(--brand-surface)) 34px 68px); /* kit stripes */
  --card-1-fg: var(--brand-primary);

  --card-2-bg: var(--brand-surface-raised);
  --card-2-fg: var(--brand-text);

  --card-3-bg: var(--brand-primary); /* flat lime slab */
  --card-3-fg: var(--brand-on-accent);

  /* 8. HIGHLIGHT TILE (large feature card) ------------------------------- */
  --highlight-bg:       var(--brand-primary);
  --highlight-fg:       var(--brand-on-accent);
  --highlight-fg-muted: color-mix(in srgb, var(--brand-on-accent) 82%, transparent);

  /* 9. BRAND-LITE KIT ---------------------------------------------------- */
  --brand-primary-text:    #B1EF4A; /* accent colour used AS text (numbers, links) */
  --brand-on-primary:      #11140F;
  --brand-on-secondary:    #11140F;
  --brand-on-tertiary:     #11140F;
  --brand-secondary-hover: #FAFDF6;
  --brand-tertiary-hover:  #7BD77F;
  --brand-focus:           #B1EF4A;

  --status-success: #6FD39B; /* always paired with icon + label */
  --status-warning: #FFA94D;
  --status-error:   #FF8FA3;
  --status-info:    #C8D2BD; /* neutral chalk tint, no blue */

  /* chart: Okabe-Ito based; each series also gets a pattern + marker + label */
  --chart-1: #E69F00; /* solid · ● */
  --chart-2: #56B4E9; /* diagonal · ■ (only blue in the file, kept for CVD safety) */
  --chart-3: #009E73; /* dots · ▲ */
  --chart-4: #F0E442; /* cross-hatch · ◆ */
  --chart-5: #CC79A7; /* vertical · ▼ */
  --chart-6: #D55E00; /* open · ○ */

  --gradient-floodlight: radial-gradient(120% 70% at 50% 0%, rgba(177,239,74,0.14) 0%, rgba(90,198,99,0.05) 35%, rgba(17,20,15,0) 70%);
  --glow:     0 0 0 1px rgba(177,239,74,0.55), 0 0 28px rgba(177,239,74,0.28); /* earned moments only */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55);
}

/* 10. LIGHT THEME (2a light) ---------------------------------------------
   Lime stays a fill with ink on top; it is never used as text on light.
   Accent-as-text switches to deep pitch green. */
[data-theme="light"] {
  --brand-bg:             #F1F2EF;
  --brand-surface:        #E6E9E3;
  --brand-surface-raised: #F4F6F2;
  --brand-border:         #C2C5BF; /* decorative only, 1.55:1 */
  --brand-border-strong:  #656B5F; /* 4.89:1 */
  --brand-text:           #161A14;
  --brand-text-muted:     #4A4F44;

  --brand-secondary:      #161A14; /* ink fills */
  --brand-on-accent:      #161A14;
  --brand-on-primary:     #161A14;
  --brand-on-secondary:   #F1F2EF;
  --brand-on-tertiary:    #161A14;
  --brand-secondary-hover:#2A2F26;

  --brand-primary-text:   #256614; /* 6.25:1 on bg */
  --brand-focus:          #256614;

  --status-success: #1E7A47;
  --status-warning: #9A5B00;
  --status-error:   #B4233C;
  --status-info:    #4A4F44;

  --badge-bg:    color-mix(in srgb, white 60%, transparent);
  --shadow-card: 0 8px 24px rgba(22,26,20,0.14), inset 0 0 0 2px color-mix(in srgb, black 6%, transparent);
  --gradient-floodlight: radial-gradient(120% 70% at 50% 0%, rgba(177,239,74,0.22) 0%, rgba(241,242,239,0) 70%);
  --glow:     0 0 0 1px rgba(37,102,20,0.5), 0 0 24px rgba(177,239,74,0.45);
  --shadow-1: 0 1px 2px rgba(22,26,20,0.14);
  --shadow-2: 0 4px 12px rgba(22,26,20,0.16);
  --shadow-3: 0 12px 32px rgba(22,26,20,0.22);
}