/**
 * Design Tokens
 * All design decisions live here. Edit this file to retheme the entire app.
 */

:root {
  /* ── Colour palette ────────────────────────────────────────── */
  --clr-bg:             #08080f;
  --clr-surface:        #100f18;
  --clr-surface-raised: #171620;
  --clr-card:           #1c1a28;
  --clr-card-hover:     #221f30;

  --clr-accent:         #c0105a;
  --clr-accent-bright:  #e91e8c;
  --clr-accent-dim:     rgba(192, 16, 90, 0.14);
  --clr-accent-glow:    rgba(192, 16, 90, 0.38);

  --clr-purple:         #6a1b9a;
  --clr-purple-bright:  #9c27b0;
  --clr-purple-glow:    rgba(106, 27, 154, 0.32);

  --clr-border:         rgba(192, 16, 90, 0.14);
  --clr-border-bright:  rgba(192, 16, 90, 0.40);

  --clr-text:           #f0e2eb;
  --clr-text-dim:       #9a7d90;
  --clr-text-muted:     #57445a;

  --clr-name:           #ff79b0;
  --clr-name-glow:      rgba(255, 121, 176, 0.28);
  --clr-action:         #ff9e4a;

  /* ── Typography ────────────────────────────────────────────── */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;

  /* ── Spacing ───────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Border radius ─────────────────────────────────────────── */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-pill: 100px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.55),
                 0 0 0 1px var(--clr-border),
                 inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-btn:       0 4px 20px var(--clr-accent-glow);
  --shadow-btn-hover: 0 6px 30px var(--clr-accent-glow);

  /* ── Motion ────────────────────────────────────────────────── */
  --ease-snap:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     140ms;
  --dur-base:     260ms;
  --dur-slow:     420ms;

  /* ── Safe areas (for notched phones) ──────────────────────── */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}