/* ==========================================================================
   11 Plus Blocks: design tokens
   --------------------------------------------------------------------------
   Ported verbatim from the iOS app's DesignSystem/Brand.swift. Every colour
   there is a light/dark *pair* built by Palette.adaptive(light:dark:), and the
   pairs are reproduced here value for value so the site and the app are the
   same product wearing the same clothes.

   The dark side is NOT an inversion. `deep` means "the strongest voice against
   the page", which on a dark page is a light colour, so deep purple headings
   become light lilac. The four course accents are all lifted for the same
   reason: #2F8F83 teal on near-black is a smudge.

   Theming follows the app's three-state model (System / Light / Dark):
     - bare :root            → the complete light palette
     - prefers-color-scheme  → dark, unless the reader has explicitly chosen light
     - [data-theme="dark"]   → an explicit choice always wins
   Never give a colour its only definition inside a media query.
   ========================================================================== */

:root {
  /* --- Brand purples ------------------------------------------------------
     Sampled from the app icon, so the site matches the mark on the App Store
     listing a parent has just come from. */
  --deep:    #4E3377;   /* darkest tone in the mark. Headings, primary text */
  --purple:  #68449E;   /* the brand's "true" purple. Primary accent */
  --lilac:   #9C81C5;   /* lightest tone. Secondary fills, selected states */

  /* --- Page ---------------------------------------------------------------
     Off-white with a purple cast: the app never goes neutral grey. */
  --ground:  #FBF8FF;
  --surface: #FFFFFF;   /* a half-step up, for cards and grouped rows */

  /* Chrome is deliberately the *deep* tone, not `purple`. Maths' accent is the
     mid purple, and if the chrome wore the same value then entering the app's
     biggest course would look identical to being nowhere. */
  --chrome:  #4E3377;

  /* --- Text --------------------------------------------------------------- */
  --ink:      #1F2937;
  --ink-soft: rgb(31 41 55 / 0.62);
  --ink-faint:rgb(31 41 55 / 0.38);

  /* --- The four courses ---------------------------------------------------
     Kept in the purple family so the app reads as one system, distinct enough
     to tell four papers apart at a glance. */
  --maths:      #68449E;
  --english:    #3F6FB5;
  --verbal:     #2F8F83;
  --non-verbal: #B5654A;

  /* --- Verdicts -----------------------------------------------------------
     Muted rather than traffic-light. A child's revision app, not an alarm. */
  --correct:   #3E8E63;
  --incorrect: #C0564B;

  /* Text and icons sitting ON TOP of a filled accent. Cannot be plain white:
     accents invert their relationship with the page between schemes. */
  --on-accent: #FFFFFF;

  /* --- Hairlines and washes ----------------------------------------------- */
  --hairline:    rgb(78 51 119 / 0.12);
  --hairline-2:  rgb(78 51 119 / 0.20);
  --wash:        rgb(104 68 158 / 0.06);
  --wash-strong: rgb(104 68 158 / 0.12);

  /* Glass. The app's floating menu is Glass.clear with a 10% purple tint. */
  --glass-tint:   rgb(255 255 255 / 0.62);
  --glass-accent: rgb(104 68 158 / 0.10);
  --glass-edge:   rgb(255 255 255 / 0.55);

  /* --- Shadows ------------------------------------------------------------
     Purple-cast rather than black, so cards sit on the lavender ground
     without dirtying it. */
  --shadow-sm: 0 1px 2px rgb(78 51 119 / 0.06), 0 2px 6px rgb(78 51 119 / 0.05);
  --shadow-md: 0 2px 4px rgb(78 51 119 / 0.05), 0 8px 24px rgb(78 51 119 / 0.09);
  --shadow-lg: 0 4px 8px rgb(78 51 119 / 0.06), 0 18px 48px rgb(78 51 119 / 0.14);
  --shadow-glass: 0 8px 32px rgb(78 51 119 / 0.16);

  color-scheme: light;
}

/* System dark, unless the reader has explicitly asked for light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --deep:    #C5AFE9;
    --purple:  #9B7BD4;
    --lilac:   #A98FD0;
    --ground:  #121019;
    --surface: #1E1A28;   /* elevation reads as light: lighter than the page */
    --chrome:  #BCA6E2;

    --ink:      #EDEAF5;
    --ink-soft: rgb(237 234 245 / 0.62);
    --ink-faint:rgb(237 234 245 / 0.38);

    --maths:      #9B7BD4;
    --english:    #7BA6E3;
    --verbal:     #4FC2B2;
    --non-verbal: #DE9070;

    --correct:   #5CBF88;
    --incorrect: #E28275;

    --on-accent: #141019;

    --hairline:    rgb(197 175 233 / 0.14);
    --hairline-2:  rgb(197 175 233 / 0.24);
    --wash:        rgb(155 123 212 / 0.10);
    --wash-strong: rgb(155 123 212 / 0.18);

    --glass-tint:   rgb(30 26 40 / 0.66);
    --glass-accent: rgb(155 123 212 / 0.12);
    --glass-edge:   rgb(197 175 233 / 0.16);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30), 0 2px 6px rgb(0 0 0 / 0.24);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.28), 0 8px 24px rgb(0 0 0 / 0.36);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.30), 0 18px 48px rgb(0 0 0 / 0.46);
    --shadow-glass: 0 8px 32px rgb(0 0 0 / 0.44);

    color-scheme: dark;
  }
}

/* An explicit choice wins in both directions. Kept as a full duplicate rather
   than @media-only, so the toggle works on a light-set OS too. */
:root[data-theme="dark"] {
  --deep:    #C5AFE9;
  --purple:  #9B7BD4;
  --lilac:   #A98FD0;
  --ground:  #121019;
  --surface: #1E1A28;
  --chrome:  #BCA6E2;

  --ink:      #EDEAF5;
  --ink-soft: rgb(237 234 245 / 0.62);
  --ink-faint:rgb(237 234 245 / 0.38);

  --maths:      #9B7BD4;
  --english:    #7BA6E3;
  --verbal:     #4FC2B2;
  --non-verbal: #DE9070;

  --correct:   #5CBF88;
  --incorrect: #E28275;

  --on-accent: #141019;

  --hairline:    rgb(197 175 233 / 0.14);
  --hairline-2:  rgb(197 175 233 / 0.24);
  --wash:        rgb(155 123 212 / 0.10);
  --wash-strong: rgb(155 123 212 / 0.18);

  --glass-tint:   rgb(30 26 40 / 0.66);
  --glass-accent: rgb(155 123 212 / 0.12);
  --glass-edge:   rgb(197 175 233 / 0.16);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30), 0 2px 6px rgb(0 0 0 / 0.24);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.28), 0 8px 24px rgb(0 0 0 / 0.36);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.30), 0 18px 48px rgb(0 0 0 / 0.46);
  --shadow-glass: 0 8px 32px rgb(0 0 0 / 0.44);

  color-scheme: dark;
}

/* ==========================================================================
   Type
   --------------------------------------------------------------------------
   Lexend Deca for display and headings: it was designed specifically to
   improve reading fluency in children, which is exactly this audience, and
   Jay chose it for the original app. Kept deliberately.

   Body copy leads with `ui-rounded`, so an iPhone or Mac visitor renders in
   SF Pro Rounded: literally the app's own body face, and everyone else
   falls through to Nunito, the closest free equivalent and already part of the
   brand. Both families are self-hosted: no third-party request on a site
   aimed at children, and no render-blocking call to a font CDN.
   ========================================================================== */
:root {
  --font-display: "Lexend Deca", ui-rounded, "Nunito", system-ui, sans-serif;
  --font-body:    ui-rounded, "Nunito", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-label:   "Nunito", ui-rounded, system-ui, sans-serif;

  /* Fluid scale. Clamped so a 320px phone and a 27" display both read well
     without a media query per step. */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.38vw, 1.38rem);
  --step-2:  clamp(1.40rem, 1.26rem + 0.68vw, 1.75rem);
  --step-3:  clamp(1.66rem, 1.43rem + 1.14vw, 2.25rem);
  --step-4:  clamp(1.97rem, 1.60rem + 1.85vw, 2.90rem);
  --step-5:  clamp(2.34rem, 1.76rem + 2.90vw, 3.75rem);
  --step-6:  clamp(2.65rem, 1.75rem + 4.50vw, 4.75rem);

  --leading-tight: 1.12;
  --leading-snug:  1.28;
  --leading-body:  1.62;

  /* --- Space -------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* --- Metrics ------------------------------------------------------------
     Brand.Metrics, unchanged. */
  --radius-card: 20px;
  --radius-tile: 24px;
  --radius-row:  14px;
  --radius-pill: 999px;
  --gutter:      20px;

  --measure: 34rem;         /* comfortable reading width for body copy */
  --page-max: 1180px;       /* the site's content rail */
  --page-pad: clamp(1.25rem, 1rem + 2vw, 2.5rem);

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   140ms;
  --dur:        240ms;
  --dur-slow:   420ms;
}