/* Kepler — Color tokens
   Source: pixelLoom-TicketSystem/src/index.css (Tailwind v4 @theme block)
   Base brand palette + neutral scale + semantic aliases for light/dark. */

:root {
  /* Base brand palette ("Paleta Oficial") */
  --color-deep-void: #0F172A;
  --color-corporate-blue: #0A58CA;
  --color-electric-cyan: #06B6D4;
  --color-high-contrast: #F8FAFC;

  /* Neutral scale (slate) */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;

  /* Status / semantic feedback colors (from ticket status + priority badges) */
  --color-blue-50: #eff6ff;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-amber-50: #fffbeb;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-emerald-50: #ecfdf5;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-rose-50: #fff1f2;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-violet-500: #8b5cf6;

  /* ── Semantic aliases — LIGHT (default) ───────────────────────────── */
  --surface-page: var(--color-high-contrast);
  --surface-card: #ffffff;
  --surface-card-alt: var(--color-slate-50);
  --surface-sidebar: var(--color-deep-void);
  --surface-input: var(--color-slate-50);
  --surface-overlay: rgba(15, 23, 42, 0.6);

  --border-default: var(--color-slate-200);
  --border-subtle: var(--color-slate-100);
  --border-sidebar: rgba(30, 41, 59, 0.5);

  --text-primary: var(--color-deep-void);
  --text-secondary: var(--color-slate-500);
  --text-tertiary: var(--color-slate-400);
  --text-inverse: var(--color-high-contrast);
  --text-on-accent: #ffffff;

  --accent-primary: var(--color-corporate-blue);
  --accent-primary-hover: rgba(10, 88, 202, 0.9);
  --accent-secondary: var(--color-electric-cyan);

  --focus-ring: rgba(10, 88, 202, 0.2);

  /* Status colors: bg / text pairs used for ticket status pills */
  --status-open-bg: var(--color-blue-50);
  --status-open-text: var(--color-blue-600);
  --status-progress-bg: var(--color-amber-50);
  --status-progress-text: var(--color-amber-600);
  --status-resolved-bg: var(--color-emerald-50);
  --status-resolved-text: var(--color-emerald-600);
  --status-closed-bg: var(--color-slate-100);
  --status-closed-text: var(--color-slate-600);
  --status-pending-bg: var(--color-rose-50);
  --status-pending-text: var(--color-rose-600);
}

/* ── Semantic aliases — DARK (.dark scope, mirrors app's dark: variant) ── */
.dark {
  --surface-page: var(--color-deep-void);
  --surface-card: var(--color-slate-900);
  --surface-card-alt: rgba(255, 255, 255, 0.05);
  --surface-sidebar: var(--color-deep-void);
  --surface-input: rgba(30, 41, 59, 0.5);
  --surface-overlay: rgba(11, 15, 25, 0.8);

  --border-default: var(--color-slate-800);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-sidebar: rgba(30, 41, 59, 0.5);

  --text-primary: var(--color-high-contrast);
  --text-secondary: var(--color-slate-400);
  --text-tertiary: var(--color-slate-500);
  --text-inverse: var(--color-deep-void);
  --text-on-accent: var(--color-deep-void);

  --accent-primary: var(--color-electric-cyan);
  --accent-primary-hover: rgba(6, 182, 212, 0.9);
  --accent-secondary: var(--color-electric-cyan);

  --focus-ring: rgba(6, 182, 212, 0.2);

  --status-open-bg: rgba(59, 130, 246, 0.1);
  --status-open-text: #60a5fa;
  --status-progress-bg: rgba(245, 158, 11, 0.1);
  --status-progress-text: #fbbf24;
  --status-resolved-bg: rgba(16, 185, 129, 0.1);
  --status-resolved-text: #34d399;
  --status-closed-bg: rgba(255, 255, 255, 0.1);
  --status-closed-text: var(--color-slate-400);
  --status-pending-bg: rgba(244, 63, 94, 0.1);
  --status-pending-text: #fb7185;
}