/* Melume — "Lilac Spotlight" theme. Light lilac stage lit by a warm spotlight; dark cinematic
   video posters; aubergine ink; spotlight-gold accent. On-brand (purple family + spotlight gold
   from the logo), premium and airy. Components reference Layer-2 aliases only (Design Baseline §2). */

:root {
  /* Layer 1 — primitives */
  /* lilac / lavender chrome */
  --lilac-50:  #faf8ff;
  --lilac-100: #f4eefc;
  --lilac-150: #efe7fa;
  --lilac-200: #e7dcf5;
  --lilac-300: #d6c7ec;
  --lilac-400: #b7a3d6;

  /* aubergine ink (from the logo) */
  --ink-900: #230524;   /* headings */
  --ink-800: #35153a;   /* body */
  --ink-600: #6b5675;   /* secondary */
  --ink-400: #9a86a6;   /* muted */

  /* warm spotlight (from the logo) */
  --spot-gold:  #e8a33d;
  --spot-gold-d:#cf8a1f;
  --spot-amber: #db895f;
  --spot-glow:  #ffe9c2;

  /* cinematic poster darks (where video lives) */
  --screen-1: #2a0a2d;
  --screen-2: #160318;

  --danger-500:  #d4453b;
  --warning-500: #b7791f;
  --success-500: #2f855a;
  --info-500:    #3764c8;

  /* Layer 2 — semantic aliases */
  --bg-canvas:   var(--lilac-100);
  --bg-surface:  #ffffff;
  --bg-raised:   #ffffff;
  --bg-sunken:   var(--lilac-150);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-400);
  --text-on-brand:  #2a1405;

  --border-subtle:  var(--lilac-200);
  --border-default: var(--lilac-300);
  --border-strong:  var(--lilac-400);

  --brand:        var(--spot-gold);
  --brand-hover:  #f0b457;
  --brand-active: var(--spot-gold-d);
  --brand-subtle: #fbf0dc;

  --focus-ring:   var(--spot-gold-d);

  /* elevation — soft layered shadows with a lilac cast (not flat borders) */
  --shadow-card:   0 1px 2px rgba(53,21,58,0.06), 0 6px 18px -8px rgba(53,21,58,0.18);
  --shadow-raised: 0 2px 6px rgba(53,21,58,0.08), 0 18px 40px -12px rgba(53,21,58,0.28);
  --shadow-glow:   0 0 0 1px var(--spot-gold), 0 0 28px -4px rgba(232,163,61,0.55);

  /* the illumination signature — a warm spotlight that sweeps in */
  --illuminate-glow: 0 0 0 1.5px var(--spot-gold), 0 14px 44px -10px rgba(232,163,61,0.55), 0 0 0 100vmax rgba(255,233,194,0.0);

  --font-display: "General Sans", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --radius-base: 14px;
}

@media (prefers-reduced-motion: reduce) { :root { --illuminate-motion: none; } }