/* Circus design tokens — paper-first, single mode. Source: circus-brand/tokens/tokens.json */
:root {
  /* ── BRAND COLOURS ── */
  --paper:       #FBF8F4;
  --ink:         #0C0907;
  --coral:       #E8604E;
  --coral-deep:  #B23A2A;
  --coral-tint:  rgba(232,96,78,0.06);
  --coral-10:    rgba(232,96,78,0.10);
  --coral-20:    rgba(232,96,78,0.20);

  /* ── ADDITIONAL CORAL OPACITY VARIANTS ── */
  --coral-06:  rgba(232,96,78,0.06);
  --coral-07:  rgba(232,96,78,0.07);
  --coral-18:  rgba(232,96,78,0.18);

  /* ── CREATOR SUB-BRAND ── */
  --teal:      #0F9E99;
  --teal-deep: #0A6E6A;

  /* ── NEUTRAL RAMP ── */
  --n-0:   #FFFFFF;
  --n-50:  #FBF8F4;
  --n-100: #F9F5F1;
  --n-200: #EFEAE5;
  --n-300: #E8E1DC;
  --n-400: #CFC5BE;
  --n-500: #6B5B52;
  --n-600: #3A2D26;
  --n-700: #1C1714;
  --n-800: #15120F;
  --n-900: #0C0907;

  /* ── SEMANTIC ALIASES ── */
  --bg:            var(--paper);
  --bg-subtle:     var(--n-100);
  --text:          var(--ink);
  --text-body:     var(--n-600);
  --text-muted:    var(--n-500);
  --border:        var(--n-300);
  --border-subtle: var(--n-200);
  --border-input:  #797067;

  /* ── NAV / SURFACES ── */
  --nav-bg:    var(--paper);
  --surface:   var(--n-100);
  --surface-border: var(--n-300);

  /* ── FONT FAMILIES ── */
  --fd: 'Red Hat Display', system-ui, sans-serif;
  --fb: 'Space Grotesk', system-ui, sans-serif;

  /* ── TYPOGRAPHY SCALE ── */
  --fs-display: clamp(48px,7vw,88px);
  --fs-title:   clamp(28px,4vw,44px);
  --fs-h2:      clamp(20px,2.5vw,26px);
  --fs-h3:      18px;
  --fs-body:    17px;
  --fs-body-sm: 16px;
  --fs-meta:    13px;
  --fs-label:   11px;

  --lh-display: 1.0;
  --lh-heading: 1.15;
  --lh-body:    1.75;
  --lh-relaxed: 1.8;

  --ls-display: -.03em;
  --ls-heading: -.025em;
  --ls-label:   .14em;

  /* ── SPACING SCALE (4px base) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── RADIUS SCALE ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── ELEVATION (light-mode shadows) ── */
  --shadow-1: 0 1px 3px rgba(12,9,7,.08), 0 1px 2px rgba(12,9,7,.06);
  --shadow-2: 0 4px 16px rgba(12,9,7,.10), 0 2px 4px rgba(12,9,7,.06);
  --shadow-3: 0 12px 40px rgba(12,9,7,.14), 0 4px 8px rgba(12,9,7,.08);

  /* ── MOTION ── */
  --dur-xs: 100ms;
  --dur-sm: 150ms;
  --dur-md: 250ms;
  --dur-lg: 400ms;
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1.0, 1);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}