/*
 * TecSkill Design System
 * Tokens oficiais. As telas consomem tokens semânticos; não use cores soltas.
 */

:root,
[data-theme="light"] {
  --brand-magenta: #a414f5;
  --brand-violet: #6d32f5;
  --brand-blue: #0878ff;
  --brand-navy: #100528;
  --brand-gradient: linear-gradient(135deg, var(--brand-magenta) 0%, var(--brand-violet) 48%, var(--brand-blue) 100%);

  --page: #f7f8fc;
  --surface: #ffffff;
  --surface-border: #e4e7ef;
  --ink: #111827;
  --ink-title: #0f172a;
  --ink-muted: #5f6b7c;

  --primary: #643df4;
  --primary-dark: #4f2bd4;
  --on-primary: #ffffff;
  --accent: #6d3cff;
  --accent-rgb: 109, 60, 255;
  --accent-tint: rgba(109, 60, 255, 0.09);

  --field-bg: #ffffff;
  --field-border: #d4d9e3;

  --glass-card: rgba(255, 255, 255, 0.74);
  --glass-chrome: rgba(255, 255, 255, 0.70);
  --glass-float: rgba(255, 255, 255, 0.48);
  --glass-line: rgba(24, 35, 59, 0.10);

  --sidebar-top: #29263d;
  --sidebar-mid: #19182a;
  --sidebar-bottom: #0e1020;
  --sidebar-ink: rgba(231, 235, 246, 0.72);
  --sidebar-ink-active: #ffffff;
  --sidebar-hairline: rgba(255, 255, 255, 0.11);
  --sidebar-indicator: rgba(124, 92, 255, 0.18);
  --sidebar-indicator-line: rgba(144, 114, 255, 0.30);

  --ok-bg: #d1fae5;
  --ok-ink: #047857;
  --danger-bg: #fee2e2;
  --danger-ink: #b91c1c;
  --warn-bg: #fef3c7;
  --warn-ink: #92400e;
  --info-bg: #e0f2fe;
  --info-ink: #0369a1;
  --neutral-bg: #e8eaf0;
  --neutral-ink: #3f4858;
  --gain: #059669;
  --loss: #dc2626;

  --chart-1: #4f6bff;
  --chart-2: #943df5;
  --chart-3: #0891b2;
  --chart-4: #0f9f75;
  --chart-5: #b77900;
  --chart-6: #d75b12;
  --chart-7: #c62c72;
  --chart-good: #0f9f75;
  --chart-warning: #b77900;
  --chart-severe: #d75b12;
  --chart-critical: #c6283d;

  --shadow-shell: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px -18px rgba(15, 23, 42, 0.24);
  --shadow-header: 0 10px 28px -16px rgba(12, 18, 38, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.56);
  --shadow-hover: 0 14px 32px -18px rgba(83, 52, 205, 0.42);
  --shadow-hero: 0 20px 42px -20px rgba(81, 48, 220, 0.62);
}

[data-theme="dark"] {
  --page: #080b14;
  --surface: #111827;
  --surface-border: #222a3a;
  --ink: #e5e7eb;
  --ink-title: #f6f7fb;
  --ink-muted: #a6b0c2;

  --primary: #6d4cff;
  --primary-dark: #8468ff;
  --on-primary: #ffffff;
  --accent: #7c5cff;
  --accent-rgb: 124, 92, 255;
  --accent-tint: rgba(124, 92, 255, 0.12);

  --field-bg: #111827;
  --field-border: #465066;

  --glass-card: rgba(17, 24, 39, 0.66);
  --glass-chrome: rgba(10, 14, 25, 0.70);
  --glass-float: rgba(10, 14, 25, 0.52);
  --glass-line: rgba(255, 255, 255, 0.10);

  --sidebar-top: #201c34;
  --sidebar-mid: #141322;
  --sidebar-bottom: #090b15;
  --sidebar-ink: rgba(231, 235, 246, 0.70);
  --sidebar-ink-active: #ffffff;
  --sidebar-hairline: rgba(255, 255, 255, 0.08);
  --sidebar-indicator: rgba(124, 92, 255, 0.18);
  --sidebar-indicator-line: rgba(144, 114, 255, 0.28);

  --ok-bg: rgba(6, 78, 59, 0.40);
  --ok-ink: #34d399;
  --danger-bg: rgba(127, 29, 29, 0.40);
  --danger-ink: #f87171;
  --warn-bg: rgba(120, 53, 15, 0.40);
  --warn-ink: #fcd34d;
  --info-bg: rgba(12, 74, 110, 0.40);
  --info-ink: #7dd3fc;
  --neutral-bg: #374151;
  --neutral-ink: #d1d5db;
  --gain: #34d399;
  --loss: #f87171;

  --chart-1: #6f86ff;
  --chart-2: #a855f7;
  --chart-3: #22b8d5;
  --chart-4: #24c695;
  --chart-5: #e2a61a;
  --chart-6: #ef7a34;
  --chart-7: #e45792;
  --chart-good: #24c695;
  --chart-warning: #e2a61a;
  --chart-severe: #ef7a34;
  --chart-critical: #f05264;

  --shadow-shell: 0 1px 2px rgba(0, 0, 0, 0.18), 0 12px 30px -18px rgba(0, 0, 0, 0.62);
  --shadow-header: 0 12px 32px -18px rgba(0, 0, 0, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-hover: 0 14px 34px -18px rgba(87, 56, 225, 0.56);
  --shadow-hero: 0 20px 44px -20px rgba(81, 48, 220, 0.72);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;

  --sidebar-width: 16rem;
  --sidebar-collapsed-width: 4.75rem;
  --sidebar-inset: 12px;

  --radius-field: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --glass-blur: 20px;
  --glass-blur-float: 28px;
  --glass-saturate: 180%;

  --dur-fast: 140ms;
  --dur-base: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-sidebar: 50;
  --z-header: 60;
  --z-dropdown: 70;
  --z-popover: 80;
  --z-modal: 100;
  --z-drawer: 110;
  --z-toast: 150;
  --z-loading: 200;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
}