/* css/tokens.css — Design system tokens */
:root {
  /* ── Colours ── */
  --accent:         #fe491c;
  --accent-dark:    #d93a12;
  --accent-light:   #ff6a45;
  --accent-glow:    rgba(254, 73, 28, 0.28);
  --accent-faint:   rgba(254, 73, 28, 0.07);
  --accent-subtle:  rgba(254, 73, 28, 0.14);
  --gold:           #d4af37;

  --bg-base:        #000000;
  --bg-raised:      #0a0a0a;
  --bg-card:        #0f0f0f;
  --bg-card-hover:  #141414;

  --ink-100:        #ffffff;
  --ink-80:         #cccccc;
  --ink-60:         #999999;
  --ink-40:         #666666;
  --ink-20:         #333333;

  --border-base:    rgba(255,255,255,0.07);
  --border-accent:  rgba(254, 73, 28, 0.28);
  --border-hover:   rgba(254, 73, 28, 0.65);

  /* ── Typography ──
     Fraunces  → editorial display serif (NOT Space Grotesk / Inter / Poppins)
     Syne      → geometric sans with personality
     IBM Plex Mono → monospace labels / metadata
  */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Syne', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', Courier, monospace;

  /* ── Scale ── */
  --text-xs:   0.65rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.4rem;
  --text-2xl:  1.75rem;
  --text-3xl:  clamp(1.8rem, 4vw, 2.8rem);
  --text-4xl:  clamp(2.5rem, 6vw, 4rem);
  --text-5xl:  clamp(3rem, 8vw, 5.5rem);

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Radius ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ── Transitions ── */
  --t-fast:   0.18s ease-out;
  --t-normal: 0.3s ease-out;
  --t-slow:   0.5s cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Shadows ── */
  --shadow-accent: 0 12px 40px rgba(254, 73, 28, 0.28);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.4);

  /* ── Container ── */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
}