/* ============================================================================
   Kinema — Color tokens
   Extracted from the live frontend. PALETTE IS FINAL — do not add new brand hues.
   Base values first, then semantic aliases.
   ============================================================================ */

:root {
  /* ── Brand gradient (cyan → indigo → magenta) ─────────────────────────── */
  --kinema-cyan:    #1DF3F0;
  --kinema-indigo:  #554BD3;
  --kinema-magenta: #F618A0;
  --kinema-gradient: linear-gradient(90deg, #1DF3F0 0%, #554BD3 52%, #F618A0 100%); /* @kind color */

  /* ── Neutrals (dark-first) ────────────────────────────────────────────── */
  --kinema-gray-950: #030712;
  --kinema-gray-900: #111827;
  --kinema-gray-800: #1F2937;
  --kinema-gray-700: #374151;
  --kinema-gray-600: #4B5563;
  --kinema-gray-500: #6B7280;
  --kinema-gray-400: #9CA3AF;
  --kinema-gray-300: #D1D5DB;
  --kinema-gray-200: #E5E7EB;
  --kinema-gray-100: #F3F4F6;
  --kinema-gray-50:  #F9FAFB;
  --kinema-white:    #FFFFFF;
  --kinema-black-tint: #140C21; /* brand-tinted near-black (favicon tile) */

  /* ── Accent · violet (primary interactive) ────────────────────────────── */
  --kinema-violet-700: #6D28D9;
  --kinema-violet-600: #7C3AED;
  --kinema-violet-500: #8B5CF6;
  --kinema-violet-400: #A78BFA;
  --kinema-violet-300: #C4B5FD;

  /* ── Semantic base ────────────────────────────────────────────────────── */
  --kinema-success:      #10B981;
  --kinema-warning:      #F59E0B;
  --kinema-warning-soft: #FBBF24;
  --kinema-error:        #EF4444;
  --kinema-error-strong: #DC2626;
  --kinema-info:         #3B82F6;
  --kinema-info-sky:     #0EA5E9;
  --kinema-neutral-accent: #94A3B8;

  /* ── Pipeline / "stage" palette (AI generation flavor) ────────────────── */
  --kinema-stage-1: #94A3B8; /* slate  */
  --kinema-stage-2: #F59E0B; /* amber  */
  --kinema-stage-3: #0EA5E9; /* sky    */
  --kinema-stage-4: #8B5CF6; /* violet */
  --kinema-stage-5: #10B981; /* emerald*/
  --kinema-stage-6: #D946EF; /* fuchsia*/

  /* ══ Semantic aliases (dark-first — the app ships dark by default) ═════════ */
  --kinema-bg:            var(--kinema-gray-900); /* page background */
  --kinema-bg-deep:       var(--kinema-gray-950); /* modals, top nav */
  --kinema-surface:       var(--kinema-gray-800); /* cards / panels */
  --kinema-surface-raised:var(--kinema-gray-700); /* filled inputs / secondary */
  --kinema-border-subtle: rgba(255,255,255,0.06); /* faint edge highlight */
  --kinema-border-hover:  var(--kinema-gray-600);

  --kinema-text:          var(--kinema-gray-200); /* high-contrast body */
  --kinema-text-body:     var(--kinema-gray-300); /* body copy on dark */
  --kinema-text-muted:    var(--kinema-gray-400); /* secondary / captions */
  --kinema-text-faint:    var(--kinema-gray-500); /* disabled / placeholder */
  --kinema-text-strong:   var(--kinema-white);

  --kinema-accent:        var(--kinema-violet-600); /* primary action fill */
  --kinema-accent-hover:  var(--kinema-violet-700);
  --kinema-accent-ring:   var(--kinema-violet-500); /* focus / selection */
  --kinema-accent-text:   var(--kinema-violet-400); /* accent text on dark */
  --kinema-accent-link:   var(--kinema-violet-300); /* inline links on dark */

  /* ── Glass surface fills ──────────────────────────────────────────────── */
  --kinema-glass-bar:   rgba(17, 24, 39, 0.70);
  --kinema-glass-panel: rgba(31, 41, 55, 0.60);
  --kinema-glass-card:  rgba(31, 41, 55, 0.70);
}