/* All Knowing — design tokens. Ink & Amber: dark by default (every page's <html> carries
   data-theme="dark"), light when the visitor picks it with the header toggle; never the device
   setting. :root holds the light values; the dark block changes only the tokens it lists.
   Use these variables everywhere; never hard-code hex values in page CSS.
   Don't change values without Elijah's go-ahead. */

:root {
  color-scheme: light;

  /* Page */
  --bg: #F5F7FA;           /* page background */
  --card: #FFFFFF;         /* cards, tables, inputs */
  --surface: #ECEFF5;      /* inset panels, table headers, stat tiles on light */
  --line: #DFE4EC;
  --line-strong: #C9D0DC;
  --ink: #12151C;          /* text */
  --ink-muted: #59616E;    /* supporting text */

  /* Accents */
  --accent: #F5B82E;       /* amber: every button, the eyebrow, the AK logo */
  --on-accent: #12151C;    /* text on amber */
  --link: #9A6700;         /* deeper amber for text links and step numbers: bright amber can't be read on light */
  --focus: #9A6700;        /* focus ring on the page; the ink band uses --band-accent */
  --seg-track: #ECEFF5;    /* segmented toggles: the track, */
  --seg-active: #9A6700;   /* the selected button's border and text (deeper amber, readable on light) */
  --seg-active-bg: #F5B82E26; /* and its fill */
  --tile: #12151C;         /* AK tile in the footer */
  --tile-ink: #F5B82E;
  --discord: #5865F2;      /* Discord's blurple, for the Discord button only */
  --on-discord: #FFFFFF;

  /* Filter chip menus */
  --menu-bg: #FFFFFF;
  --menu-hover: #ECEFF5;   /* the selected and hovered row */
  --radio-off: #B4BCC8;    /* an unselected option's circle */

  /* Ink band: header, hero, stats, last-10 strip, membership block */
  --band-bg: #12151C;
  --band-surface: #1D212B;
  --band-line: #2A2F3B;
  --band-line-strong: #3A4150;
  --band-ink: #F2F4F8;
  --band-muted: #9AA3B2;
  --band-accent: #F5B82E;
  --band-on-accent: #12151C;

  /* Results: the only red and green on the site.
     --win / --loss: bright, for lines, fills, bar segments, pill backgrounds and everything on
     the ink band, in both modes. --win-text / --loss-text: profit, units, ROI, CLV and WON / LOST
     on the page and cards; deeper in light mode, where the bright ones can't be read as text. */
  --win: #30D158;
  --loss: #FF453A;
  --win-text: #1F7A36;
  --loss-text: #D70015;
  --push: #6B7280;
  --win-bg: #30D15829;     /* calendar tiles, soft fills */
  --loss-bg: #FF453A29;

  /* Solid result pills, on light areas and on the band: W on --win, L on --loss, P on --push-bg */
  --on-win: #12151C;
  --on-loss: #12151C;
  --push-bg: #DADDE2;
  --push-ink: #3F4652;

  /* Type */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-display: Onest, "Schibsted Grotesk", system-ui, sans-serif; /* AK monogram only */

  --text-hero: 56px;
  --text-hero-mobile: 40px;
  --text-h1: 40px;
  --text-h2: 28px;
  --text-h3: 20px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-eyebrow: 12px;
  --text-stat: 28px;
  --text-data: 14px;
  --text-label: 11px;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 4px;   /* pills, tags */
  --radius-md: 8px;   /* buttons, stat cards, inputs */
  --radius-lg: 12px;  /* panels */

  /* Minimum tap target */
  --tap: 44px;
}

/* Dark mode. Everything not listed here (amber, the ink band, the bright --win / --loss and the
   solid W/L pills) is the same in both modes. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0B0D12;           /* page, darker than the band */
  --card: #161A22;
  --surface: #1D212B;
  --line: #262C38;
  --line-strong: #353D4D;
  --ink: #F2F4F8;
  --ink-muted: #9AA3B2;

  --link: #F5B82E;         /* bright amber reads well on dark */
  --focus: #F5B82E;
  --seg-track: #0B0D12;
  --seg-active: #F5B82E;
  --seg-active-bg: #F5B82E1A;
  --tile: #1D212B;
  --tile-ink: #F5B82E;

  --menu-bg: #1D212B;
  --menu-hover: #262C38;
  --radio-off: #535C6E;

  --push: #8A93A3;
  --win-text: #30D158;     /* the bright colours read well on dark */
  --loss-text: #FF453A;
  --win-bg: #30D15840;
  --loss-bg: #FF453A40;
  --push-bg: #2A2F3B;      /* push pill */
  --push-ink: #C4CAD4;
}