/* ============================================================
   SBC Alliance — Design Tokens
   Editorial · Grassroots · Folk-geometric
   ============================================================ */

:root {
  /* — Color: purple-blue brand + coral accent — */
  --paper:        #faf8ff;   /* page bg — barely-there purple wash */
  --paper-soft:   #f4f0ff;   /* lavender card surface */
  --paper-deep:   #ebeeff;   /* sky-tinted inset / divider */
  --paper-coral:  #fff0e8;   /* coral-tinted card (sparingly) */
  --ink:          #1a1635;   /* deep navy-purple — headings / footer */
  --ink-soft:     #2a2363;   /* secondary text */
  --muted:        #6b6585;   /* body — muted purple-gray */
  --rule:         #d8d2eb;   /* hairline rules */

  --terracotta:   #5d2cb5;   /* primary brand — purple */
  --terracotta-d: #4a1f95;   /* hover / dark purple */
  --terracotta-l: #7d4ad0;   /* lighter purple tint */

  --teal:         #3237f0;   /* secondary brand — blue */
  --teal-d:       #1f23c4;
  --teal-l:       #5b5fff;

  --ochre:        #ff6b35;   /* accent — coral CTA */
  --ochre-d:      #e54d15;
  --saffron:      #ff8a5a;

  --leaf:         #7d4ad0;   /* tertiary — light purple */
  --indigo:       #2a2363;   /* tertiary — deep navy-purple */

  /* — Brand gradient — hero, CTA banners, logo, header strips, active tabs */
  --brand-grad:      linear-gradient(to right, #5d2cb5, #3237f0);
  --brand-grad-soft: linear-gradient(to right, rgba(93, 44, 181, 0.92), rgba(50, 55, 240, 0.92));

  --bg-grad-warm: radial-gradient(ellipse at 20% 0%, #ebeeff 0%, transparent 55%),
                  radial-gradient(ellipse at 90% 100%, #f4f0ff 0%, transparent 50%),
                  #faf8ff;

  /* — Type — */
  --ff-display: "Roboto", system-ui, sans-serif;
  --ff-body:    "Roboto", system-ui, sans-serif;
  --ff-hand:    "Roboto", system-ui, sans-serif;
  --ff-mono:    "Roboto", system-ui, sans-serif;

  /* Type scale — 4 sizes only (small · body · heading · display) */
  --fs-small:   clamp(12px, 0.85vw, 14px);
  --fs-body:    clamp(16px, 1.05vw, 18px);
  --fs-heading: clamp(24px, 2.2vw, 36px);
  --fs-display: clamp(40px, 5vw, 72px);

  /* Legacy aliases → 4-size scale (keep existing CSS working) */
  --fs-xxs:        var(--fs-small);
  --fs-xs:         var(--fs-small);
  --fs-sm:         var(--fs-small);
  --fs-md:         var(--fs-body);
  --fs-lg:         var(--fs-body);
  --fs-xl:         var(--fs-heading);
  --fs-2xl:        var(--fs-heading);
  --fs-3xl:        var(--fs-heading);
  --fs-4xl:        var(--fs-display);
  --fs-5xl:        var(--fs-display);
  --fs-base:       var(--fs-body);
  --fs-lede:       var(--fs-body);
  --fs-subheading: var(--fs-heading);
  --fs-stat:       var(--fs-heading);
  --fs-hero:       var(--fs-display);
  --fs-hero-tight: var(--fs-display);
  --fs-cta:        var(--fs-body);
  --fs-prose:      var(--fs-body);
  --lh-prose:      1.7;

  /* font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* line heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.75;

  /* letter spacing */
  --ls-tighter:  -0.03em;
  --ls-tight:    -0.02em;
  --ls-display:  -0.01em;
  --ls-heading:  -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-caps:     0.18em;

  /* — Spacing (4pt grid) — */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;

  /* — Layout — */
  --container: 1240px;
  --container-narrow: 880px;
  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 24px;
  --radius-xl: 36px;

  /* — Effects — */
  --shadow-1: 0 1px 2px rgba(26, 22, 53, 0.06);
  --shadow-2: 0 6px 18px -8px rgba(26, 22, 53, 0.18), 0 2px 4px rgba(26, 22, 53, 0.04);
  --shadow-3: 0 24px 48px -16px rgba(26, 22, 53, 0.22), 0 4px 8px rgba(26, 22, 53, 0.05);
  --shadow-warm: 0 18px 40px -20px rgba(74, 31, 149, 0.35);

  /* — Motion — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 180ms;
  --dur-2: 280ms;
  --dur-3: 480ms;
  --dur-4: 720ms;

  /* — Z-index ladder — */
  --z-nav: 80;
  --z-overlay: 90;
  --z-modal: 100;
  --z-toast: 120;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}