/*
 * CHAG SPORTS design tokens.
 *
 * Authoritative visual specification: docs/CHAG_SPORTS_Interface_Design_System_V1.0.pdf
 * ("Design System V1.0") - reconciled here by Task 1.14. Brand colors
 * (--brand-*) are the four approved values, confirmed unchanged by V1.0
 * against docs/Chag Sports Brand Assets/Brand materials/Colour palette.jpg
 * ("OFFICIAL COLOUR PALETTE FOR CHAG SPORTS") - do not change these, and
 * do not import another product's palette (Design System V1.0 §16,
 * "NON-NEGOTIABLES": "Chag colors remain authoritative; no EdgeBet green
 * or bookmaker palette"). Logo files derived from the same source live in
 * static/brand/ (see CLAUDE.md "Frontend conventions" for the full list).
 *
 * Everything else in this file (semantic roles, neutrals, spacing, radii,
 * shadows, type scale) is a CHAG-SPORTS-specific design decision built on
 * top of those four approved colors - never hard-code a color/space/radius
 * value directly in another CSS file, reference a token from here instead.
 */

:root {
  /* ---- Approved brand palette (source of truth - see comment above) ---- */
  --brand-navy: #0d1226;
  --brand-light-blue: #9cdae9;
  --brand-slate: #434a66;
  --brand-yellow-green: #edf262;

  /* ---- Semantic: brand roles (Design System V1.0 §03 "COLOUR SYSTEM") ----
   * Recommended distribution: ~60% foundations (navy/neutrals), ~30%
   * structural surfaces, ~10% signal colors - --color-accent (yellow)
   * stays scarce by design, reserved for action/confidence/selection/
   * premium emphasis, not general-purpose button color. These four don't
   * swap value by theme (they're fixed brand roles); --color-bg/surface/
   * text below are what actually change between light and dark. */
  --color-primary: var(--brand-navy); /* Navy: authority, navigation, dark canvas, premium/slip surfaces */
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #1a2140;
  --color-accent: var(--brand-yellow-green); /* Yellow: primary action, confidence, selection, key highlight */
  --color-accent-contrast: var(--brand-navy);
  /* Darkened accent for hovering an already-filled accent surface (e.g.
     a "favourited" yellow button) - the same exact shade already used
     as dark theme's --color-primary-hover below, given its own
     theme-invariant name since an accent-filled control needs a hover
     step regardless of which theme --color-primary currently means. */
  --color-accent-hover: #e3e94a;
  --color-intelligence: var(--brand-light-blue); /* Light Blue: analytics, data, probability support, data viz */
  --color-intelligence-contrast: var(--brand-navy);
  --color-muted: var(--brand-slate); /* Slate: secondary text, borders, inactive controls, structure */
  --color-muted-contrast: #ffffff;
  /* Alias kept for the existing secondary-button role - same slate value,
     see components.css .btn-secondary. Prefer --color-muted in new code
     when the *semantic* meaning (per Design System V1.0) is "muted". */
  --color-secondary: var(--color-muted);
  --color-secondary-contrast: var(--color-muted-contrast);

  /* ---- Semantic: functional/status colors ----
   * Conventional, accessible values - not part of the 4-color approved
   * brand palette (which has no status colors), so these are a deliberate
   * UI-convention choice rather than a brand guess (Design System V1.0
   * §03: "State semantics, not new brand colors"). */
  --color-success: #157347;
  --color-success-contrast: #ffffff;
  --color-warning: #b45309;
  --color-warning-contrast: #ffffff;
  --color-error: #c1121f;
  --color-error-contrast: #ffffff;
  --color-info: #0b5fa8;
  --color-info-contrast: #ffffff;

  /* ---- Semantic: surfaces & text (light theme default) ----
   * Neutrals here are tints of the approved navy/slate, not independently
   * invented colors. */
  --color-bg: #ffffff;
  --color-bg-secondary: #f4f5f9;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-text-primary: var(--brand-navy);
  --color-text-secondary: var(--brand-slate);
  /* Launch polish: one notch darker (was #6b7191, 4.38:1 on --color-bg-secondary) so muted captions reach WCAG AA
     on every light surface - 5.06:1 on white, 4.65:1 on --color-bg-secondary - still lighter than secondary text. */
  --color-text-muted: #676d8d;
  --color-text-on-primary: #ffffff;
  --color-border: #e2e4ee;
  --color-border-strong: #c7cbdd;
  --color-focus-ring: var(--brand-slate);

  /* ---- Border radii ----
   * Generic scale (sm/md/lg/xl/pill) for anything not covered by a named
   * component radius below. Prefer the named tokens for card/input/modal/
   * slip surfaces - they're what Design System V1.0 §05 actually specifies
   * ranges for. */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  --radius-card: 0.5625rem; /* 9px - within the 8-10px range */
  --radius-input: 0.375rem; /* 6px - within the 5-7px range (buttons use this too) */
  --radius-modal: 0.75rem; /* 12px - within the 10-14px range */
  --radius-slip: 0.6875rem; /* 11px - within the 10-12px range */

  /* ---- Spacing scale ----
   * Design System V1.0 §05: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96,
   * 128 px - named by pixel value (not index) so the token name always
   * tells you the value. */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-128: 8rem;

  /* Card/section spacing shortcuts (Design System V1.0 §05/§06). */
  --card-padding: var(--space-24); /* 20-24px range - using the upper bound */
  /* One inset option of a segmented .filter-group. A control that has to sit level with a group (the date-filter
     pill) is this plus the group's inset padding and border - see upcoming-predictions.css. */
  --filter-option-height: 2.25rem;
  --grid-gap: var(--space-16); /* 16-20px range - using the lower bound */
  --section-spacing-mobile: var(--space-48); /* 48-64px mobile */
  --section-spacing-desktop: var(--space-80); /* 80-120px desktop - using the lower bound */
  --touch-target-min: 2.75rem; /* 44px practical minimum touch target */

  /* ---- Shadows ----
   * Design System V1.0 §05: "Level 1 is for hoverable cards; Level 2 for
   * dropdowns/sticky slip; Level 3 for modals and mobile bottom sheets."
   * --shadow-sm/md/lg below ARE Level 1/2/3 respectively - use borders and
   * surface contrast before reaching for a heavier shadow. */
  --shadow-sm: 0 1px 2px rgba(13, 18, 38, 0.08); /* Level 1: hoverable cards */
  --shadow-md: 0 4px 12px rgba(13, 18, 38, 0.1); /* Level 2: dropdowns, sticky slip */
  --shadow-lg: 0 12px 32px rgba(13, 18, 38, 0.16); /* Level 3: modals, bottom sheets */
  /* Solid bottom-edge shadow for a raised/"3D" control (e.g. the
     favourite button) - collapses to none on :active, with the control
     translated down by the same offset, to fake a physical button being
     pressed flush. Kept as its own token (not shadow-sm/md/lg, which are
     all soft/blurred elevation, not a hard skeuomorphic edge). */
  --shadow-3d: 0 3px 0 rgba(13, 18, 38, 0.35);

  /* ---- Container widths ---- */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1360px; /* content max ~1280-1360px per Design System V1.0 §06/§27 */
  --slip-width: 320px; /* 300-320px desktop sticky Prediction Slip sidecar, §06/§12/§27 */

  /* ---- Transitions ----
   * Design System V1.0 §18 "BEHAVIOUR": button ~150ms, controls ~180ms,
   * cards ~220ms, drawers/bottom sheets 250-300ms. --transition-fast/base
   * cover button/control timing; --transition-slow covers cards; a
   * dedicated --transition-drawer covers drawers/bottom sheets. All are
   * disabled via prefers-reduced-motion - see base.css. */
  --transition-fast: 150ms ease;
  --transition-base: 180ms ease;
  --transition-slow: 220ms ease;
  --transition-drawer: 280ms ease;

  /* ---- Typography (Design System V1.0 §04 "TYPOGRAPHY" / §27 "DEVELOPER
   * HANDOFF") ----
   * Primary interface family: navigation, labels, body, buttons, filters,
   * odds, probabilities, tables, controls, metadata. Editorial display
   * family, used selectively: hero statements, major editorial headings,
   * selected performance figures, premium emphasis - don't overuse it in
   * operational UI. These are the two families Design System V1.0 defines
   * (superseding Task 1.13's placeholder system-font stack) - not a
   * rediscovered brand asset, a deliberate decision recorded in the
   * Architecture Amendment and finalized here. */
  --font-family-base: Arial, Helvetica, system-ui, sans-serif;
  --font-family-display: Georgia, "Times New Roman", serif;

  /* Sizes below are the mobile/base value in each range; responsive.css
   * scales display/h1/h2 up at wider breakpoints toward the desktop end
   * of the range Design System V1.0 gives (see that file's comments for
   * the exact breakpoint values chosen). */
  --font-size-display: 2.75rem; /* 44px - mobile range is 42-52px */
  --font-size-h1: 2rem; /* 32px base, scales to 48-64px desktop range */
  --font-size-h2: 1.75rem; /* 28px base, scales to 36-48px desktop range */
  --font-size-h3: 1.375rem; /* 22px base, scales to 26-32px desktop range */
  --font-size-h4: 1.125rem; /* 18px base, scales to 20-24px desktop range */
  --font-size-body-lg: 1.125rem; /* 18px, per spec */
  --font-size-body: 1rem; /* 16px, per spec */
  --font-size-body-sm: 0.875rem; /* 14px - within the 14-16px "Body" range given in §27 */
  --font-size-nav: 0.8125rem; /* 13px - within the 13-14px range */
  --font-size-control: 0.8125rem; /* 13px - within the 12-14px range */
  --font-size-button: var(--font-size-control);
  --font-size-metadata: 0.625rem; /* 10px - within the 9-11px range */
  --font-size-caption: var(--font-size-metadata);
  --font-size-stat: 1.5rem; /* 24px base, within the 20-32px range; scales up at wider breakpoints */
  --font-size-probability: 1.125rem; /* alias kept for existing .text-probability-value usage */

  --line-height-tight: 1.15;
  --line-height-heading: 1.3;
  --line-height-body-lg: 1.6;
  --line-height-body: 1.65; /* within the 1.65-1.7 range */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900; /* controls/metadata/stat values allow up to 900 */
}

/* ---- Dark theme ----
 * Deliberately designed, not a naive inversion (Design System V1.0 §19):
 * the approved navy becomes the dark canvas itself, stepped navy/slate
 * surfaces provide elevation, Yellow is primary action, Light Blue is
 * analytical signals. Concretely: --color-primary switches from navy to
 * Yellow here - navy IS the background in dark mode, so a "navy primary
 * button" would be invisible; --color-intelligence (Light Blue) and
 * --color-accent stay conceptually the same brand color in both themes.
 *
 * Applied two ways: automatically via prefers-color-scheme when the user
 * has no saved choice, and explicitly via [data-theme="dark"] once
 * theme.js has set it (see static/js/theme.js) - the explicit attribute
 * always wins over the media query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: var(--brand-yellow-green);
    --color-primary-contrast: var(--brand-navy);
    --color-primary-hover: #e3e94a;
    --color-muted: #7d84a3;
    --color-muted-contrast: var(--brand-navy);

    --color-success: #3ddc84;
    --color-success-contrast: var(--brand-navy);
    --color-warning: #f5b942;
    --color-warning-contrast: var(--brand-navy);
    --color-error: #ff6b6b;
    --color-error-contrast: var(--brand-navy);
    --color-info: #6fb3e0;
    --color-info-contrast: var(--brand-navy);

    --color-bg: var(--brand-navy);
    --color-bg-secondary: #141a33;
    --color-surface: #1a2140;
    --color-surface-elevated: #212a4d;
    --color-text-primary: #f5f7fa;
    --color-text-secondary: #aeb4cc;
    /* Launch polish: lighter than --color-muted (was the same #7d84a3, only 4.27:1 on a card and 3.79:1 on an
       elevated surface) so muted captions reach WCAG AA on every dark surface - 4.66:1 at worst. */
    --color-text-muted: #8d94b2;
    --color-text-on-primary: var(--brand-navy);
    --color-border: #2a324f;
    --color-border-strong: #3a4266;
    --color-focus-ring: var(--brand-light-blue);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-3d: 0 3px 0 rgba(0, 0, 0, 0.45);
  }
}

[data-theme="dark"] {
  --color-primary: var(--brand-yellow-green);
  --color-primary-contrast: var(--brand-navy);
  --color-primary-hover: #e3e94a;
  --color-muted: #7d84a3;
  --color-muted-contrast: var(--brand-navy);

  --color-success: #3ddc84;
  --color-success-contrast: var(--brand-navy);
  --color-warning: #f5b942;
  --color-warning-contrast: var(--brand-navy);
  --color-error: #ff6b6b;
  --color-error-contrast: var(--brand-navy);
  --color-info: #6fb3e0;
  --color-info-contrast: var(--brand-navy);

  --color-bg: var(--brand-navy);
  --color-bg-secondary: #141a33;
  --color-surface: #1a2140;
  --color-surface-elevated: #212a4d;
  --color-text-primary: #f5f7fa;
  --color-text-secondary: #aeb4cc;
  --color-text-muted: #8d94b2; /* launch polish: see the matching media-query block above */
  --color-text-on-primary: var(--brand-navy);
  --color-border: #2a324f;
  --color-border-strong: #3a4266;
  --color-focus-ring: var(--brand-light-blue);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-3d: 0 3px 0 rgba(0, 0, 0, 0.45);
}