/* ============================================================
   DIGITAL KOUSTUK — Design Tokens
   Direction: "Cinematic Navy & Liquid Gold"
   Deep navy void · molten copper-gold · editorial serif
   ============================================================ */

:root {
  /* ---- Core palette (from brand swatches) ---- */
  --navy-900: #050b18;   /* deepest void — page bg base */
  --navy-850: #07101f;
  --navy-800: #08172e;   /* brand deep navy */
  --navy-700: #0d1d36;
  --navy-600: #15253f;   /* brand mid navy */
  --navy-500: #1d3050;
  --navy-400: #2b3d5b;   /* brand light navy */
  --navy-300: #3a4f72;

  /* ---- Copper / Gold accents ---- */
  --gold-100: #f6e8c9;
  --gold-200: #ecd6a0;
  --gold-300: #e3c074;   /* primary luminous gold */
  --gold-400: #d9b59d;   /* warm sand */
  --copper-500: #cc7d51; /* brand copper */
  --copper-600: #b86a3f;
  --bronze-500: #bd9060; /* brand bronze */

  /* ---- Neutrals / text ---- */
  --ink-100: #f4f1ea;   /* near-white, warm */
  --ink-200: #e6e1d6;
  --ink-300: #c4c9d6;   /* cool muted */
  --ink-400: #8b95a8;   /* secondary text on navy */
  --ink-500: #5d6678;
  --line: rgba(217, 181, 157, 0.14); /* hairline copper */
  --line-strong: rgba(227, 192, 116, 0.28);
  --glass: rgba(13, 29, 54, 0.55);
  --glass-light: rgba(43, 61, 91, 0.35);

  /* ---- Signature gradients ---- */
  --grad-gold: linear-gradient(120deg, #f6e8c9 0%, #e3c074 32%, #cc7d51 70%, #bd9060 100%);
  --grad-gold-soft: linear-gradient(120deg, #ecd6a0, #d9b59d);
  --grad-text: linear-gradient(105deg, #f6e8c9 0%, #e3c074 45%, #cc7d51 100%);
  --grad-navy: linear-gradient(180deg, #08172e 0%, #050b18 100%);
  --grad-aura: radial-gradient(circle at 50% 0%, rgba(204, 125, 81, 0.22), transparent 60%);
  --grad-spot: radial-gradient(circle at 30% 20%, rgba(227, 192, 116, 0.16), transparent 55%);

  /* ---- Typography ----
     Clean sans is the voice for everything (headings + body).
     The serif is reserved for small italic accent words only. */
  --font-display: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* Fluid type scale (clamp) — calmer, ~25-30% smaller than before */
  --fs-mega: clamp(2.8rem, 7.5vw, 7rem);
  --fs-h1: clamp(2.2rem, 4.8vw, 4.2rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.9rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.9rem);
  --fs-h4: clamp(1.1rem, 1.6vw, 1.35rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
  --fs-small: clamp(0.82rem, 1vw, 0.92rem);
  --fs-micro: 0.74rem;

  /* ---- Spacing scale ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 7rem;
  --sp-8: 10rem;
  --section-y: clamp(5rem, 12vh, 11rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1320px;

  /* ---- Radii ---- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- Shadows / glow ---- */
  --shadow-soft: 0 20px 60px -30px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 30px 80px -40px rgba(0, 0, 0, 0.85);
  --glow-gold: 0 0 50px -8px rgba(227, 192, 116, 0.45);
  --glow-copper: 0 0 60px -10px rgba(204, 125, 81, 0.5);

  /* ---- Easing (Emil curves) ---- */
  --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);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Durations ---- */
  --d-fast: 160ms;
  --d-mid: 280ms;
  --d-slow: 600ms;

  /* z-index scale */
  --z-canvas: 0;
  --z-content: 2;
  --z-nav: 100;
  --z-cursor: 9999;
}