/* ==========================================================================
   tokens.css — NuThinking design tokens

   SOURCE OF TRUTH: Design/tokens.json (the published NuThinking design
   system). Do not invent values here. If the design system changes, re-sync
   Design/ and update this file to match.

   This supersedes the palette derived from the earlier rebrand sheet
   (#580EC1 / #FD8006, Sora + Inter). The Design system replaces it outright:
   #4518AF / #FE870B, Nunito + Nunito Sans, flat colour, rounded shapes.

   Layer 1 below is the design system verbatim.
   Layer 2 aliases the names the site's components were already written
   against, so the brand change did not require rewriting every rule.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     LAYER 1 — the design system, verbatim from Design/tokens.json
     --------------------------------------------------------------------- */

  /* Brand. Purple leads, orange sparks: ~60% white/neutral, 30% purple,
     10% orange across a layout. */
  --nu-purple:     #4518AF;   /* wordmark, headlines, primary buttons.
                                 10.5:1 on white → AAA. */
  --nu-orange:     #FE870B;   /* the swirl. A LINE AND A FILL, NOT TEXT:
                                 2.4:1 on white. Never body copy. */
  --purple-deep:   #2A0C73;   /* dark fields and footers */
  --block-primary: #4518AF;
  --purple-100:    #EDE7FA;   /* soft tint — cards, callouts */
  --orange-100:    #FFF1E0;

  --surface:       #FFFFFF;
  --surface-alt:   #F7F5FB;
  --ink:           #1C1433;   /* body text, 15.9:1 on surface */
  --ink-muted:     #5B5470;   /* secondary text, 7.1:1 on surface → AAA */
  --text-purple:   #4518AF;
  --text-orange:   #A64D00;   /* 5.7:1 — the accessible orange FOR TEXT */
  --on-purple:     #FFFFFF;
  --on-orange:     #1C1433;   /* never white text on orange */
  --line:          #E3DDF0;
  --focus:         #4518AF;

  --font-display:  Nunito, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-sans:     "Nunito Sans", system-ui, sans-serif;

  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-6: 48px; --space-8: 64px;

  --radius-sm:   8px;
  --radius-md:   16px;   /* cards */
  --radius-lg:   28px;   /* big brand fields */
  --radius-pill: 999px;  /* buttons and chips */

  --swirl-ratio:    0.32;
  --swirl-width-sm: 4px;
  --swirl-width-md: 8px;
  --swirl-width-lg: 14px;

  /* ---------------------------------------------------------------------
     LAYER 2 — aliases for the names the components already use
     --------------------------------------------------------------------- */
  --purple:       var(--nu-purple);
  --purple-lift:  #5B2FD6;          /* one lighter step, for hover only */
  --purple-ink:   var(--purple-deep);
  --purple-tint:  var(--purple-100);
  --purple-line:  var(--line);
  --orange:       var(--nu-orange);
  --orange-deep:  var(--text-orange);
  --orange-tint:  var(--orange-100);
  --paper:        var(--surface);
  --paper-alt:    var(--surface-alt);
  --white:        #FFFFFF;
  --ink-soft:     var(--ink-muted);
  --gray:         var(--ink-muted);
  --font-body:    var(--font-sans);

  --radius:       var(--radius-md);
  --maxw:         1180px;
  --maxw-read:    820px;

  /* FLAT COLOUR ONLY — the brand guide forbids gradients, glows and drop
     shadows: "depth comes from overlapping color fields". Every shadow and
     gradient has been removed from the stylesheets; separation is carried by
     --line borders and the surface / surface-alt pairing. These three are
     kept as no-ops so any stray rule cannot reintroduce elevation. */
  --shadow-sm: none;
  --shadow:    none;
  --shadow-lg: none;

  /* --- Type scale ------------------------------------------------------
     Design sizes are fixed (display-xl 64, h1 44, h2 32, h3 24). They are
     clamped here so a 44px h1 does not overflow a 375px viewport; the upper
     bound of each clamp is the design system's value exactly. */
  --display-xl: clamp(38px, 5.4vw, 64px);
  --h1:         clamp(32px, 4.2vw, 44px);
  --h2:         clamp(26px, 3.0vw, 32px);
  --h3:         clamp(20px, 1.8vw, 24px);
  --lede:       18px;   /* body-lg */
  --body:       16px;
  --small:      14px;   /* label */
  --micro:      12px;   /* caption */

  --lh-display: 1.14;   /* 50/44 ≈ 1.14, matching the h1 spec */
  --lh-body:    1.5;    /* 24/16, the design system's body line-height */
  --ls-micro:   .10em;

  /* --- Motion ---------------------------------------------------------- */
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 180ms;
  --dur:      280ms;
  --dur-slow: 420ms;
  --stagger:  80ms;

  /* --- Spacing rhythm (aliased to the design system's scale) ------------ */
  --s-1: 4px;
  --s-2: var(--space-1);    /* 8  */
  --s-3: 12px;
  --s-4: var(--space-2);    /* 16 */
  --s-5: var(--space-3);    /* 24 */
  --s-6: var(--space-4);    /* 32 */
  --s-7: var(--space-6);    /* 48 */
  --s-8: var(--space-8);    /* 64 */
  --s-9: 96px;
  --s-10: 128px;

  /* Section padding: space-8 desktop / space-6 mobile, per the guide. */
  --band-y: clamp(48px, 4.6vw, 64px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur:      0ms;
    --dur-slow: 0ms;
    --stagger:  0ms;
  }
}