/* ============================================================
   DESIGN TOKENS — single source of truth.
   Every component value must reference one of these. No raw px,
   hex, or ms anywhere else in the CSS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=Inter:wght@400;500&display=swap');

:root {

  /* ----------------------------------------------------------
     1. COLOUR — primitives
     Raw palette. Use only inside this file (or via aliases).
  ---------------------------------------------------------- */
  --c-black:        #000000;
  --c-off-black:    #141414;
  --c-gray-900:     #2c2c2c;
  --c-gray-700:     #414641;
  --c-gray-500:     #5f645a;
  --c-gray-300:     #cdd2c8;
  --c-gray-100:     #f5f5f7;
  --c-bone:         #f5f5f0;
  --c-paper:        #f7f7f6;
  --c-white:        #ffffff;

  --c-brand:        #910590;
  --c-brand-deep:   #6e0070;
  --c-brand-soft:   #f492f7;
  --c-brand-cream:  #ffd188;
  --c-warm:         #fff5e6;
  --c-yellow:       #fad91f;

  --c-positive:     #157a38;
  --c-negative:     #c81927;
  --c-accent-red:   #dd0042;

  /* ----------------------------------------------------------
     2. COLOUR — semantic (use these in components)
  ---------------------------------------------------------- */
  --text-primary:        var(--c-off-black);
  --text-secondary:      var(--c-gray-700);
  --text-on-dark:        var(--c-bone);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.7);
  --text-link:           var(--c-brand);

  --surface-page:        var(--c-paper);
  --surface-elevated:    var(--c-white);
  --surface-warm:        var(--c-warm);
  --surface-yellow:      var(--c-yellow);
  --surface-dark:        var(--c-off-black);
  --surface-darker:      var(--c-black);
  --surface-overlay:     rgba(20, 20, 20, 0.05);

  --border-subtle:       var(--c-gray-300);
  --border-strong:       var(--c-off-black);
  --border-on-dark:      rgba(255, 255, 255, 0.2);

  --action-rest:         var(--c-gray-900);
  --action-primary:      var(--c-brand);
  --action-primary-inv:  var(--c-brand-soft);
  --action-hover:        var(--c-accent-red);

  /* ----------------------------------------------------------
     3. TYPOGRAPHY — families
  ---------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ----------------------------------------------------------
     4. TYPOGRAPHY — type scale
     Apply via .type-* utility classes (see base.css).
  ---------------------------------------------------------- */
  --type-display-size:    clamp(64px, 9vw, 128px);
  --type-display-weight:  800;
  --type-display-lh:      0.88;
  --type-display-ls:      -1px;

  --type-h1-size:         clamp(48px, 6vw, 80px);
  --type-h1-weight:       800;
  --type-h1-lh:           1;
  --type-h1-ls:           -0.5px;

  --type-h2-size:         clamp(32px, 3.4vw, 40px);
  --type-h2-weight:       600;
  --type-h2-lh:           1.1;
  --type-h2-ls:           0;

  --type-h3-size:         clamp(20px, 2vw, 24px);
  --type-h3-weight:       600;
  --type-h3-lh:           1.2;
  --type-h3-ls:           0;

  --type-body-lg-size:    clamp(18px, 1.6vw, 24px);
  --type-body-lg-weight:  400;
  --type-body-lg-lh:      1.5;
  --type-body-lg-ls:      -0.12px;

  --type-body-size:       16px;
  --type-body-weight:     400;
  --type-body-lh:         1.5;
  --type-body-ls:         0;

  --type-label-size:      14px;
  --type-label-weight:    600;
  --type-label-lh:        1.2;
  --type-label-ls:        0.8px;

  /* ----------------------------------------------------------
     5. SPACING — strict 8-pt grid.
     Every padding / gap / margin in the UI references a step here.
     Step name = number of 8-pt units (s-2 = 16 px, s-12 = 96 px).
  ---------------------------------------------------------- */
  --s-0:    0;
  --s-h:    4px;     /* half-step — icon nudges & badges only */
  --s-1:    8px;
  --s-2:   16px;
  --s-3:   24px;
  --s-4:   32px;
  --s-5:   40px;
  --s-6:   48px;
  --s-8:   64px;
  --s-10:  80px;
  --s-12:  96px;
  --s-15: 120px;
  --s-20: 160px;

  /* ----------------------------------------------------------
     6. SPACING — semantic (prefer these over raw --s-*)
  ---------------------------------------------------------- */
  --gap-xs:   var(--s-1);    /* 8  — chip group, tight stack */
  --gap-sm:   var(--s-2);    /* 16 — paragraph rhythm */
  --gap-md:   var(--s-3);    /* 24 — within a card */
  --gap-lg:   var(--s-5);    /* 40 — sub-section */
  --gap-xl:   var(--s-8);    /* 64 — block break */
  --gap-2xl:  var(--s-12);   /* 96 — section rhythm */

  --space-section:   clamp(var(--s-6), 8vw, var(--s-12));   /* 48 → 96 */
  --space-page-x:    clamp(var(--s-2), 5vw, var(--s-10));   /* 16 → 80 */

  /* ----------------------------------------------------------
     7. LAYOUT
  ---------------------------------------------------------- */
  --page-max:     1920px;
  --content-max:  1280px;
  --reading-max:   720px;
  --aside-max:    504px;     /* split layout left column */

  /* ----------------------------------------------------------
     8. RADIUS / BORDER / SHADOW
  ---------------------------------------------------------- */
  --radius-xs:     1px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:    16px;
  --radius-pill: 999px;

  --border-w:      1px;
  --border-w-2:    2px;

  --shadow-pop:    0 8px 32px rgba(0, 0, 0, 0.18);

  /* ----------------------------------------------------------
     9. MOTION
  ---------------------------------------------------------- */
  --motion-fast:    150ms ease;
  --motion-base:    250ms ease;
  --motion-slow:    400ms ease;

  /* ----------------------------------------------------------
     10. Z-INDEX
  ---------------------------------------------------------- */
  --z-nav:       100;
  --z-dropdown:  200;
  --z-modal:     300;
}

/* Reduced-motion users: cancel all transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}