/* ==========================================================================
   Design tokens
   Custom tokens use the --gv- prefix. Bootstrap variables are overridden at
   the bottom so brand values flow into Bootstrap components.

   Contrast (WCAG 2.1, measured against --gv-color-bg / --gv-color-card):
     text        16.1 / 14.1   AA ✓      platform colours ≥ 6.1     AA ✓
     text-muted   8.0 /  7.0   AA ✓      white on accent   4.42     AA ✗ (needs 4.5)
     text-subtle  5.2 /  4.6   AA ✓      accent text on bg 4.40     AA ✗ (needs 4.5)

   Accent #EC1B24 is the client brand red (2026-10-05). It passes 3:1 for UI
   shapes (borders, focus rings, icons) but is just under 4.5:1 for small text.
   One-line AA fixes if wanted: --gv-accent: #E31A22 (white text 4.73:1) and
   --gv-accent-text: #F2545B (5.8:1 on the page background).
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
  /* Brand */
  --gv-color-primary: #0B0D10;
  --gv-accent: #EC1B24;                       /* brand red: buttons, active states, focus */
  --gv-accent-hover: #C8161E;                 /* darker on hover; 5.85:1 with white */
  --gv-accent-ink: #FFFFFF;                   /* text on accent backgrounds */
  --gv-accent-text: var(--gv-accent);         /* accent-coloured text on dark backgrounds */
  --gv-accent-tint: rgb(236 27 36 / 0.14);    /* active nav/tab background */
  --gv-accent-glow: rgb(236 27 36 / 0.4);

  /* Surfaces (darkest → lightest) */
  --gv-color-bg: var(--gv-color-primary);
  --gv-color-panel: #13161C;        /* header, rail, drawer, inputs */
  --gv-color-card: #181D24;
  --gv-color-card-hover: #1F252E;
  --gv-color-thumb: #0F1217;        /* image placeholder background */
  --gv-color-overlay: rgb(11 13 16 / 0.9);  /* badges/chips over images */
  --gv-color-border: #262C36;
  --gv-color-border-strong: #3A414D;

  /* Text */
  --gv-color-text: #F1F3F5;
  --gv-color-text-muted: #A0A7B4;
  --gv-color-text-subtle: #7D8592;  /* placeholders, meta; min AA */

  /* Feedback */
  --gv-color-danger: #F87171;   /* form errors; 7.0:1 on the page, distinct from the brand red */

  /* Platforms */
  --gv-color-android: #4ADE80;
  --gv-color-java: #F87171;
  --gv-color-html5: #FB923C;
  --gv-color-rating: #FBBF24;

  /* Typography */
  --gv-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gv-font-size-xs: 0.75rem;     /* 12px – badges, chips, small buttons (Lighthouse legibility minimum) */
  --gv-font-size-sm: 0.8125rem;   /* 13px – card titles, nav, buttons */
  --gv-font-size-base: 0.9375rem; /* 15px – body */
  --gv-font-size-lg: 1.125rem;    /* 18px – section titles */
  --gv-font-size-xl: 1.5rem;      /* 24px – hero title (mobile) */
  --gv-font-size-2xl: 2.25rem;    /* 36px – hero title (desktop) */
  --gv-font-weight-regular: 400;
  --gv-font-weight-semibold: 600;
  --gv-font-weight-bold: 700;
  --gv-font-weight-heavy: 800;
  --gv-line-height: 1.5;
  --gv-line-height-tight: 1.2;

  /* Spacing scale */
  --gv-space-1: 0.25rem;
  --gv-space-2: 0.5rem;
  --gv-space-3: 1rem;
  --gv-space-4: 1.5rem;
  --gv-space-5: 2.5rem;

  /* Shape */
  --gv-radius-sm: 0.375rem;  /* 6px – buttons, badges */
  --gv-radius: 0.625rem;     /* 10px – cards, inputs */
  --gv-radius-lg: 0.875rem;  /* 14px – hero */
  --gv-radius-pill: 50rem;

  /* Elevation */
  --gv-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --gv-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
  --gv-shadow-glow: 0 0 12px var(--gv-accent-glow);

  /* Focus */
  --gv-focus-ring: 0 0 0 2px var(--gv-color-bg), 0 0 0 4px var(--gv-accent);

  /* Layout */
  --gv-header-height: 60px;
  --gv-rail-width: 76px;
  --gv-chipbar-height: 0px;   /* mobile chip bar; 0 when the rail is vertical */
  --gv-sticky-offset: calc(var(--gv-header-height) + var(--gv-chipbar-height));
  --gv-grid-gap: 0.75rem;

  /* Motion */
  --gv-transition: 200ms ease;

  /* Layers */
  --gv-z-rail: 1020;
  --gv-z-header: 1030;
  --gv-z-skip: 1080;

  /* Bootstrap overrides */
  --bs-body-bg: var(--gv-color-bg);
  --bs-body-color: var(--gv-color-text);
  --bs-body-font-family: var(--gv-font-family);
  --bs-body-font-size: var(--gv-font-size-base);
  --bs-body-line-height: var(--gv-line-height);
  --bs-secondary-color: var(--gv-color-text-muted);
  --bs-tertiary-bg: var(--gv-color-panel);
  --bs-border-color: var(--gv-color-border);
  --bs-border-radius: var(--gv-radius);
  --bs-link-color: var(--gv-accent-text);
  --bs-link-color-rgb: 236, 27, 36;
  --bs-link-hover-color: var(--gv-accent-hover);
  --bs-link-hover-color-rgb: 200, 22, 30;
  --bs-focus-ring-color: var(--gv-accent-glow);
  --bs-emphasis-color: var(--gv-color-text);
  --bs-heading-color: var(--gv-color-text);
}

@media (max-width: 767.98px) {
  :root {
    --gv-header-height: 52px;
    --gv-chipbar-height: 49px;
    --gv-grid-gap: 0.5rem;
  }
}