/* =============================================
   HowToClaudeAtoZ — Design Token System
   Import: <link rel="stylesheet" href="/tokens.css">
   ============================================= */

:root {
  /* ── BRAND COLOURS ── */
  --gold:           #c9a84c;
  --gold-light:     #e8c87a;
  --gold-dim:       #8a6f35;
  --gold-pale:      rgba(201,168,76,0.12);
  --gold-ring:      rgba(201,168,76,0.35);
  --dark:           #0d0b08;
  --dark-surface:   #1c1917;
  --dark-raised:    #292524;
  --cream:          #f5ead6;
  --cream-dim:      rgba(245,234,214,0.75);
  --cream-muted:    rgba(245,234,214,0.45);

  /* ── NEUTRAL SCALE ── */
  --stone-50:  #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;

  /* ── AMBER/AMBER ACCENT ── */
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  /* ── FLUID TYPOGRAPHY ── */
  --text-h1:    clamp(2.5rem, 6vw, 5rem);
  --text-h2:    clamp(1.8rem, 4vw, 3rem);
  --text-h3:    clamp(1.3rem, 2.5vw, 2rem);
  --text-h4:    clamp(1.1rem, 2vw, 1.5rem);
  --text-body:  clamp(1rem, 1.5vw, 1.125rem);
  --text-small: clamp(0.875rem, 1.2vw, 0.9375rem);
  --text-xs:    0.75rem;

  /* ── FONTS ── */
  --font-serif: 'Cinzel', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* ── 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;

  /* ── RADII ── */
  --r-sm:   4px;   --r-md: 8px;  --r-lg: 12px;
  --r-xl:   16px;  --r-2xl: 24px; --r-full: 9999px;

  /* ── SHADOWS ── */
  --sh-sm:   0 1px 2px rgba(0,0,0,0.05);
  --sh-md:   0 4px 12px rgba(0,0,0,0.08);
  --sh-lg:   0 12px 32px rgba(0,0,0,0.12);
  --sh-gold: 0 0 0 3px rgba(201,168,76,0.3);
  --sh-dark: 0 20px 60px rgba(13,11,8,0.5);

  /* ── TRANSITIONS ── */
  --t-fast:   150ms ease;
  --t-base:   250ms ease;
  --t-slow:   400ms ease;
  --t-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Z-INDEX SCALE ── */
  --z-base:       1;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    500;
  --z-page-wipe:  8000;
  --z-grain:      8001;
  --z-cursor-ring: 9000;
  --z-cursor-dot:  9001;
}