/* Bits&Pieces — Color tokens
   Dark-first, entertainment-grade. Hot magenta hero + telenovela gold + electric violet.
*/
:root {
  /* ── Neutrals: warm-tinted ink (purple-black, never flat gray) ── */
  --ink-900: #0D0A12; /* app canvas / deepest */
  --ink-850: #110D18;
  --ink-800: #16111E; /* primary surface */
  --ink-700: #221A2E; /* raised surface */
  --ink-600: #2E2440; /* hover surface / inputs */
  --ink-500: #463A5C; /* hairlines on dark, disabled fills */
  --ink-400: #6E6184; /* muted text / icons */
  --ink-300: #9C90B0; /* secondary text */
  --ink-200: #C9C0D6; /* body text on dark */
  --ink-100: #EAE5F0; /* high-contrast text on dark */
  --white:   #FFFFFF;
  --paper:   #FBF8FF; /* light-context surface */

  /* ── Brand: Punch (hero magenta) ── */
  --punch-700: #C0084A;
  --punch-600: #E60E58; /* pressed */
  --punch-500: #FF1F6B; /* PRIMARY */
  --punch-400: #FF5C92; /* hover-lighten / accents */
  --punch-300: #FF8FB4;
  --punch-100: #FFE0EC; /* tint surfaces (light) */

  /* ── Brand: Spotlight (telenovela gold) ── */
  --spotlight-600: #F2B414; /* pressed */
  --spotlight-500: #FFC93C; /* secondary accent */
  --spotlight-400: #FFD86B;
  --spotlight-100: #FFF2CF;

  /* ── Brand: Signal (electric violet — AI / tech / gradient partner) ── */
  --signal-600: #5B2EE5;
  --signal-500: #7C4DFF;
  --signal-400: #9B74FF;
  --signal-100: #E9E0FF;

  /* ── Semantic status ── */
  --success-500: #22C77F;
  --warning-500: #FFB020;
  --danger-500:  #FF4D4D;
  --info-500:    #4DA6FF;

  /* ── Signature gradients ── */
  --grad-brand:     linear-gradient(135deg, #FF1F6B 0%, #7C4DFF 100%);   /* @kind color */ /* magenta → violet : the B&P gradient */
  --grad-spotlight: linear-gradient(135deg, #FF1F6B 0%, #FFC93C 100%);   /* @kind color */ /* magenta → gold : warm / telenovela */
  --grad-signal:    linear-gradient(135deg, #7C4DFF 0%, #4DA6FF 100%);   /* @kind color */ /* violet → blue : tech / AI */
  --grad-fade-ink:  linear-gradient(180deg, rgba(13,10,18,0) 0%, rgba(13,10,18,0.9) 100%); /* @kind color */ /* video protection scrim */

  /* ════ Semantic aliases ════ */
  --bg:             var(--ink-900);
  --surface-1:      var(--ink-800);
  --surface-2:      var(--ink-700);
  --surface-3:      var(--ink-600);
  --surface-card:   var(--ink-800);
  --surface-inset:  var(--ink-850);

  --border:         rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.16);
  --border-accent:  var(--punch-500);

  --text-primary:   var(--ink-100);
  --text-secondary: var(--ink-300);
  --text-muted:     var(--ink-400);
  --text-onaccent:  #FFFFFF;
  --text-link:      var(--punch-400);

  --accent:         var(--punch-500);
  --accent-hover:   var(--punch-400);
  --accent-press:   var(--punch-600);
  --focus-ring:     var(--punch-400);

  /* Glows used as colored shadows on dark */
  --glow-punch:     0 8px 32px rgba(255,31,107,0.40);
  --glow-spotlight: 0 8px 32px rgba(255,201,60,0.35);
  --glow-signal:    0 8px 32px rgba(124,77,255,0.40);
}