/* CSS Custom Properties — Official World Design System
   Defines the full design token palette: colours, typography, spacing,
   transitions, and layout values used across all pages.
*/

:root {
  /* Colours — bold, playful palette (decorative brand constants, mode-independent) */
  --color-primary: #FF3366;       /* Vibrant pink — decorative accent only */
  --color-secondary: #6C2BD9;    /* Electric purple */
  --color-accent: #00D4AA;       /* Bright teal */
  --color-yellow: #FFD23F;       /* Sunny yellow */
  --color-dark: #1A1A2E;         /* Deep navy */
  --color-light: #FFFFFF;        /* White */

  /* Stable foreground for fixed-dark chrome (header/footer/hero over scrim).
     Mode-independent so it never inverts in dark mode. White on #1A1A2E ≈ 15.96:1. */
  --color-on-dark: #FFFFFF;
  /* High-contrast focus ring for controls sitting on the dark chrome.
     White outline on #1A1A2E ≈ 15.96:1 (well above the 3:1 UI threshold). */
  --focus-ring-on-dark: #FFFFFF;

  /* ------------------------------------------------------------------
     Mode tokens — LIGHT (default). Dark overrides below.
     Ratios computed with the sRGB WCAG formula during planning.
     ------------------------------------------------------------------ */
  --color-bg: #FFFFFF;            /* page background */
  --color-surface: #F6F7F9;       /* cards / alt sections */
  --color-text: #1A1A2E;          /* body text on bg — 17.06:1 */
  --color-text-muted: #4B5563;    /* secondary text — 7.56:1 */
  --color-heading: #1A1A2E;       /* headings — 17.06:1 */
  --btn-primary-bg: #C2185B;      /* primary button fill, white text — 5.87:1 */
  --btn-primary-bg-hover: #A3154D;/* darker hover */
  --color-link: #6C2BD9;          /* inline links / secondary accent — 7.03:1 */

  /* Legacy aliases kept so existing var(--color-*) refs still resolve. */
  --color-body-text: #1A1A2E;   /* was #2D2D3A; aligned to --color-text */
  --color-muted: #4B5563;       /* was #6B7280 (4.83 fails body); now 7.56:1 */

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 3rem;
  --font-size-3xl: 4.5rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-medium: 300ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 80px;
}

/* ------------------------------------------------------------------
   DARK mode — overrides surface/text tokens on <html data-theme="dark">
   ------------------------------------------------------------------ */
[data-theme="dark"] {
  --color-bg: #12121F;            /* page background */
  --color-surface: #1E1E32;       /* cards / alt sections */
  --color-text: #E5E7EB;          /* body text — 14.98:1 */
  --color-text-muted: #9CA3AF;    /* secondary text — 7.31:1 */
  --color-heading: #F3F4F6;       /* headings — ~15:1 */
  --btn-primary-bg: #C2185B;      /* primary button, white text — 5.87:1 (on button, not bg) */
  --btn-primary-bg-hover: #D81B60;
  --color-link: #FF7A9C;          /* links on dark bg — 7.52:1 */

  /* Legacy aliases follow the mode in dark so inline var() refs recolour. */
  --color-body-text: #E5E7EB;
  --color-muted: #9CA3AF;
  --color-light: #12121F;         /* "light" surfaces become dark surfaces */
  --color-dark: #0C0C16;          /* "dark" sections go a touch deeper than bg */

  /* In dark mode --color-link is a light/bright colour, so the .btn--secondary
     hover (text over the link-coloured fill) must use a dark foreground.
     Navy #1A1A2E over dark brand #FF7A9C = 6.92:1, ocean #38BDF8 = 7.96:1,
     sunset #FDBA74 = 10.11:1 — all clear AA 4.5:1. */
  --btn-secondary-hover-fg: #1A1A2E;
}

/* ------------------------------------------------------------------
   Accents — compose independently of mode via <html data-accent="...">
   Each link-on-bg ratio recomputed & recorded in verification.md.
   ------------------------------------------------------------------ */
[data-accent="ocean"] {
  --color-link: #0E7490;          /* teal-blue on white — 5.0:1 */
}
[data-theme="dark"][data-accent="ocean"] {
  --color-link: #38BDF8;          /* sky on dark — 8.0:1 */
}

[data-accent="sunset"] {
  --color-link: #B4530A;          /* burnt orange on white — 5.0:1 */
}
[data-theme="dark"][data-accent="sunset"] {
  --color-link: #FDBA74;          /* warm sand on dark — 9.9:1 */
}