/* Ember & Oak — Design Tokens
   Single source of truth. Never use raw hex or px in component CSS. */

:root {

  /* ── Colour Palette ── */
  --c-void:      #0E0B08;  /* Page background */
  --c-parchment: #F0E9DF;  /* Primary text on dark */
  --c-ember:     #B8732A;  /* Accent — CTA, active, dividers */
  --c-oak:       #221608;  /* Card / surface backgrounds */
  --c-ash:       #7A6A58;  /* Muted text, captions */
  --c-cream:     #E0D4C0;  /* Secondary text */

  /* Transparent variants */
  --c-ember-10:  rgba(184, 115, 42, 0.10);
  --c-ember-20:  rgba(184, 115, 42, 0.20);
  --c-parchment-60: rgba(240, 233, 223, 0.60);

  /* ── Typography ── */
  --f-display: 'Fraunces', serif;
  --f-body:    'Plus Jakarta Sans', sans-serif;

  /* Type scale — fluid */
  --t-hero:  clamp(3.5rem, 9vw, 8.5rem);
  --t-h1:    clamp(2.5rem, 5vw, 4.5rem);
  --t-h2:    clamp(1.75rem, 3vw, 2.75rem);
  --t-h3:    clamp(1.25rem, 2vw, 1.625rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-label: 0.6875rem;

  /* ── Spacing (4pt grid) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── Layout ── */
  --max-width: 1320px;
  --gutter-mobile: var(--sp-6);
  --gutter-tablet: var(--sp-12);
  --gutter-desktop: var(--sp-20);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;
  --dur-xslow: 800ms;

  /* ── Borders ── */
  --radius-none: 0;
  --border-ember: 1px solid var(--c-ember);
  --border-ash: 1px solid rgba(122, 106, 88, 0.25);

  /* ── Z-index scale ── */
  --z-base:      0;
  --z-above:    10;
  --z-nav:      40;
  --z-overlay: 100;
  --z-preload: 999;
}