/* ==========================================================
   SKY — KYTHERA — DESIGN TOKENS
   Single source of truth for color, type, spacing, layers.
   ========================================================== */

:root {

  /* ---------- COLOR ---------- */
  --c-deep-navy:      #060a16;
  --c-midnight-blue:  #0d1528;
  --c-aurora-cyan:    #6fe3d9;
  --c-moon-white:     #f5f3ec;
  --c-warm-gold:      #c9a84c;
  --c-gold-soft:      #e8c97a;
  --c-sky-blue:       #a8d8f0;

  /* derived / utility */
  --c-text:           var(--c-moon-white);
  --c-text-dim:       rgba(245, 243, 236, 0.56);
  --c-text-faint:     rgba(245, 243, 236, 0.32);
  --c-border-soft:    rgba(245, 243, 236, 0.10);
  --c-border-gold:    rgba(201, 168, 76, 0.35);
  --c-glass-fill:     rgba(13, 21, 40, 0.45);
  --c-glass-fill-lo:  rgba(13, 21, 40, 0.25);

  /* ---------- TYPOGRAPHY ---------- */
  --f-display: 'Cinzel', serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  --fs-eyebrow: 0.68rem;
  --fs-caption: 0.78rem;
  --fs-body:    0.95rem;
  --fs-lead:    1.15rem;
  --fs-h3:      clamp(1.3rem, 3vw, 1.7rem);
  --fs-h2:      clamp(1.9rem, 5vw, 2.8rem);
  --fs-h1:      clamp(2.4rem, 8vw, 4.2rem);

  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --lh-loose: 1.75;

  --ls-eyebrow: 0.28em;
  --ls-heading: 0.05em;

  /* ---------- SPACING (8pt system) ---------- */
  --sp-1: 0.5rem;   /* 8px  */
  --sp-2: 1rem;     /* 16px */
  --sp-3: 1.5rem;   /* 24px */
  --sp-4: 2rem;     /* 32px */
  --sp-5: 3rem;     /* 48px */
  --sp-6: 4rem;     /* 64px */
  --sp-7: 6rem;     /* 96px */
  --sp-8: 8rem;     /* 128px */

  --section-pad-y: clamp(4rem, 12vw, 8rem);
  --section-pad-x: clamp(1.25rem, 6vw, 4rem);

  /* ---------- RADIUS ---------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---------- SHADOW / GLOW ---------- */
  --glow-gold:  0 0 32px rgba(201, 168, 76, 0.35);
  --glow-cyan:  0 0 32px rgba(111, 227, 217, 0.30);
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* ---------- Z-LAYERS ----------
     Background world sits low, UI content sits high.
     Kept centralized so stacking never has to be guessed. */
  --z-bg-aurora:        1;
  --z-bg-nebula:        2;
  --z-bg-stars-far:     3;
  --z-bg-stars-mid:     4;
  --z-bg-stars-near:    5;
  --z-bg-moon:          6;
  --z-bg-constellation: 7;
  --z-bg-clouds:        8;
  --z-bg-fog:           9;
  --z-bg-foreground:    10;

  --z-orb:              20;
  --z-moon-nav:         30;
  --z-content:          10;
  --z-header:           40;
  --z-overlay:          100;

  /* ---------- MOTION ---------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 1.2s;
}