/* ============================================================
   VibeBuilders — Design Tokens
   Cosmic-forge system: obsidian night, molten gold, arcane cyan
   Color model: OKLCH (modern browsers)
   ============================================================ */

:root {
  /* --- Surfaces (obsidian, slight cool depth) --- */
  --bg:          oklch(0.145 0.014 264);
  --bg-2:        oklch(0.175 0.016 264);
  --surface:     oklch(0.205 0.018 265);
  --surface-2:   oklch(0.245 0.020 265);
  --surface-3:   oklch(0.285 0.022 265);
  --line:        oklch(0.34 0.022 265);
  --line-soft:   oklch(0.28 0.020 265);

  /* --- Ink --- */
  --ink:         oklch(0.975 0.008 90);
  --ink-2:       oklch(0.875 0.012 88);   /* body */
  --muted:       oklch(0.735 0.020 262);  /* secondary */
  --faint:       oklch(0.60 0.020 262);   /* tertiary / captions */

  /* --- Molten gold (primary heat) --- */
  --gold:        oklch(0.835 0.135 84);
  --gold-2:      oklch(0.76 0.145 74);
  --gold-deep:   oklch(0.66 0.150 62);

  /* --- Ember (warm spark) --- */
  --ember:       oklch(0.685 0.195 42);
  --ember-2:     oklch(0.60 0.205 34);

  /* --- Arcane (cool AI / vibe energy) --- */
  --arcane:      oklch(0.815 0.115 205);
  --arcane-2:    oklch(0.70 0.130 224);
  --arcane-deep: oklch(0.58 0.130 244);

  /* --- Semantic --- */
  --primary:     var(--gold);
  --on-primary:  oklch(0.16 0.02 70);
  --success:     oklch(0.80 0.14 155);
  --danger:      oklch(0.68 0.20 25);

  /* --- Tints / glows (alpha) --- */
  --gold-glow:   oklch(0.83 0.14 84 / 0.28);
  --ember-glow:  oklch(0.66 0.20 40 / 0.30);
  --arcane-glow: oklch(0.72 0.13 220 / 0.26);
  --hair:        oklch(1 0 0 / 0.06);   /* hairline on dark */
  --hair-strong: oklch(1 0 0 / 0.12);

  /* --- Typography --- */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.66vw, 1.85rem);
  --step-3:  clamp(1.85rem, 1.6rem + 1.25vw, 2.6rem);
  --step-4:  clamp(2.3rem, 1.9rem + 2vw, 3.4rem);
  --step-5:  clamp(2.9rem, 2.2rem + 3.5vw, 5.2rem);

  /* --- Spacing (4/8 rhythm) --- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;      --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;
  --section-y: clamp(3.25rem, 2.25rem + 4.5vw, 6rem);

  /* --- Radii --- */
  --r-1: 8px;  --r-2: 12px;  --r-3: 18px;  --r-4: 26px;  --r-pill: 999px;

  /* --- Shadows / elevation --- */
  --sh-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --sh-2: 0 8px 24px -12px oklch(0 0 0 / 0.65);
  --sh-3: 0 24px 64px -24px oklch(0 0 0 / 0.75);
  --sh-gold: 0 12px 48px -16px oklch(0.7 0.15 70 / 0.45);

  /* --- Layout --- */
  --container: 1200px;
  --container-wide: 1320px;
  --nav-h: 68px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 140ms;
  --dur-2: 200ms;
  --dur-3: 280ms;
  --dur-4: 440ms;

  /* --- Z-index scale --- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 40;
  --z-nav: 60;
  --z-backdrop: 80;
  --z-modal: 90;
  --z-toast: 100;

  color-scheme: dark;
}