/* ═══════════════════════════════════════════════
   VERRATON KRIEGER — DESIGN TOKENS
   css/tokens.css

   Single source of truth for all design values.
   Extend here when adding new brand elements.
   ═══════════════════════════════════════════════ */

:root {

  /* ── COLOUR PALETTE ── */
  --ink:         #0a0907;
  --parchment:   #f5f1ea;
  --gold:        #c9a84c;
  --gold-dim:    #8a6f30;
  --gold-pale:   rgba(201, 168, 76, 0.12);
  --rust:        #b5430e;
  --teal:        #1a6b6b;
  --cream:       #ede8df;
  --warm-mid:    #2a2520;
  --warm-dark:   #16120e;
  --muted:       #6b635a;
  --muted-light: #8a8078;

  /* ── SEMANTIC COLOURS ── */
  --color-bg:          var(--ink);
  --color-bg-alt:      var(--warm-dark);
  --color-bg-card:     rgba(255, 255, 255, 0.03);
  --color-text:        var(--parchment);
  --color-text-muted:  var(--muted);
  --color-accent:      var(--gold);
  --color-border:      rgba(201, 168, 76, 0.18);
  --color-border-soft: rgba(107, 99, 90, 0.25);
  --color-danger:      var(--rust);
  --color-success:     var(--teal);

  /* ── TYPOGRAPHY ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Syne', sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  --size-xs:   0.6rem;
  --size-sm:   0.75rem;
  --size-base: 1rem;
  --size-md:   1.2rem;
  --size-lg:   1.8rem;
  --size-xl:   clamp(2.2rem, 4vw, 3.8rem);
  --size-2xl:  clamp(3.5rem, 8vw, 7.5rem);

  --weight-light:  300;
  --weight-normal: 400;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-black:  800;

  --leading-tight:  1.1;
  --leading-normal: 1.7;
  --leading-loose:  1.85;

  --tracking-tight:  -0.01em;
  --tracking-wide:   0.12em;
  --tracking-wider:  0.18em;
  --tracking-widest: 0.22em;

  /* ── SPACING SCALE ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  /* ── SECTION PADDING ── */
  --section-pad-y: var(--space-28);
  --section-pad-x: var(--space-16);

  /* ── LAYOUT ── */
  --max-width:        1440px;
  --content-width:    1200px;
  --reading-width:    640px;

  /* ── BORDERS & RADIUS ── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;

  /* ── SHADOWS ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.6);

  /* ── Z-INDEX SCALE ── */
  --z-base:      1;
  --z-raised:    10;
  --z-overlay:   100;
  --z-sticky:    900;
  --z-drawer:    9000;
  --z-modal:     9999;

  /* ── TRANSITIONS ── */
  --ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:   0.15s var(--ease-out);
  --transition-base:   0.3s  var(--ease-out);
  --transition-slow:   0.6s  var(--ease-out);
  --transition-slower: 0.8s  var(--ease-out);
}