/* ============================================================
   tokens.css  –  Single source of truth for all design tokens
   ============================================================
   Spacing scale: Fibonacci-inspired  (1, 2, 3, 5, 8, 13, 21, 34, 55)
   Type scale:    Minor third (1.2)
   Colors:        Cosmic dusk palette
   ============================================================ */

:root {
  /* ── Spacing (Fibonacci × 4px base) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-5: 20px;
  --sp-8: 32px;
  --sp-13: 52px;
  --sp-21: 84px;
  --sp-34: 136px;
  --sp-55: 220px;

  /* ── Type scale (minor-third 1.2, base 1rem = 16px) ── */
  --ts-xs:   0.694rem;   /* ~11px */
  --ts-sm:   0.833rem;   /* ~13px */
  --ts-base: 1rem;       /* 16px  */
  --ts-md:   1.2rem;     /* ~19px */
  --ts-lg:   1.44rem;    /* ~23px */
  --ts-xl:   1.728rem;   /* ~28px */
  --ts-2xl:  2.074rem;   /* ~33px */
  --ts-3xl:  2.488rem;   /* ~40px */

  /* ── Colors – Cosmic Dusk ── */
  --c-void:        #0b0614;
  --c-deep:        #130a24;
  --c-plum:        #1f1035;
  --c-nebula:      #2d1854;
  --c-lavender:    #b8a9d4;
  --c-stardust:    #e0d4f5;
  --c-moonlight:   #f4eeff;
  --c-white:       #fffbff;

  --c-rose:        #ff6b8a;
  --c-rose-soft:   #ff9bb0;
  --c-rose-deep:   #d94466;
  --c-gold:        #ffd56b;
  --c-gold-soft:   #ffe5a0;
  --c-coral:       #ff8c6b;
  --c-cyan:        #6bfff2;
  --c-cyan-dim:    #4dc9c0;

  /* ── Semantic aliases ── */
  --c-bg:          var(--c-void);
  --c-surface:     rgba(31, 16, 53, 0.65);
  --c-surface-dim: rgba(19, 10, 36, 0.80);
  --c-text:        var(--c-stardust);
  --c-text-dim:    var(--c-lavender);
  --c-text-bright: var(--c-moonlight);
  --c-accent:      var(--c-rose);
  --c-accent-soft: var(--c-rose-soft);
  --c-link:        var(--c-cyan);
  --c-link-hover:  var(--c-cyan-dim);
  --c-success:     #6bffb8;
  --c-error:       var(--c-rose-deep);

  /* ── Borders & Radii ── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 2px  8px rgba(0,0,0,0.35);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.55);
  --shadow-glow-rose: 0 0 20px rgba(255,107,138,0.35);
  --shadow-glow-gold: 0 0 20px rgba(255,213,107,0.30);
  --shadow-glow-cyan: 0 0 20px rgba(107,255,242,0.25);

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  0.15s;
  --dur-normal: 0.3s;
  --dur-slow:  0.6s;

  /* ── Font stacks ── */
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-hand:    'Caveat', cursive;
  --font-sans:    'Source Sans 3', system-ui, sans-serif;
}

/* ── Utility: Chromatic glow on text ── */
.u-glow-rose {
  text-shadow:
    0 0  6px rgba(255,107,138,0.6),
    0 0 20px rgba(255,107,138,0.3);
}
.u-glow-gold {
  text-shadow:
    0 0  6px rgba(255,213,107,0.6),
    0 0 20px rgba(255,213,107,0.3);
}
.u-glow-cyan {
  text-shadow:
    0 0  6px rgba(107,255,242,0.5),
    0 0 20px rgba(107,255,242,0.2);
}
.u-glow-soft {
  text-shadow:
    0 0  8px rgba(184,169,212,0.4),
    0 0 24px rgba(184,169,212,0.15);
}

/* ── Utility: Focus ring (keyboard only) ── */
:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 3px;
}

/* ── Utility: Interactive hover / active ── */
.u-hover-lift {
  transition: transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
}
.u-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.u-hover-lift:active {
  transform: translateY(0) scale(0.98);
}