/* TecSkill Design System - tema claro */
/*
 * 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;
}

:root {
--name: TecSkill;
--font-family: var(--font-sans);
--font-size: 13px;
--text-color: var(--ink);
--text-color-strong: var(--ink-title);
--text-color-light: var(--ink-muted);
--template-border-color: var(--surface-border);
--main-color: var(--accent);
--live-background-color: var(--page);
--content-background: transparent;
--content-border-color: var(--surface-border);
--content-border-radius: var(--radius-lg);
--scrollbar-color: var(--surface-border);
--preloader-color: var(--accent);
--color-overlay: rgba(8, 11, 20, 0.55);
--header-height: 64px;
--header-background-color: var(--glass-float);
--header-border-bottom: transparent;
--header-track-border-right: transparent;
--header-text-color: var(--ink-title);
--header-box-shadow: var(--shadow-header);
--header-logo-background: var(--sidebar-mid);
--header-logo-border-right: var(--sidebar-hairline);
--header-logo-border-bottom: var(--sidebar-hairline);
--header-logo-text-color: #ffffff;
--header-logo-font-size: 16px;
--menu-width: 280px;
--menu-background-color: var(--sidebar-mid);
--menu-master-color-strong: var(--sidebar-ink-active);
--menu-border-right: var(--sidebar-hairline);
--menu-check-color: #ffffff;
--menu-background-check: var(--accent);
--menu-button-border-color: var(--sidebar-hairline);
--menu-background-button-circle: var(--sidebar-indicator);
--menu-color-button-circle: var(--sidebar-ink-active);
--menu-user-splash-background: var(--sidebar-top);
--menu-icon-font-size: 14px;
--submenu-background-color: var(--sidebar-mid);
--submenu-border-right: var(--sidebar-hairline);
--submenu-text-color: var(--sidebar-ink);
--submenu-sub-text-color: var(--sidebar-ink);
--submenu-text-hover: var(--sidebar-ink-active);
--submenu-background-check: var(--sidebar-indicator);
--submenu-check-color: var(--sidebar-ink-active);
--submenu-font-size: 13px;
--submenu-item-padding-vertical: 10px;
--submenu-item-padding-horizontal: 12px;
--top-menu-border: var(--glass-line);
--top-menu-background-color: var(--glass-chrome);
--top-menu-color: var(--ink-muted);
--top-menu-hover-color: var(--accent);
--top-menu-background-check: var(--accent);
--top-menu-check-color: #ffffff;
--top-menu-background-button-circle: var(--accent-tint);
--top-menu-color-button-circle: var(--accent);
--top-submenu-background-color: var(--surface);
--top-submenu-text-color: var(--ink);
--top-submenu-text-hover: var(--accent);
--top-submenu-background-check: var(--accent);
--top-submenu-check-color: #ffffff;
--button-height: 36px;
--button-border: var(--surface-border);
--button-text-color: var(--ink-title);
--button-text-color-hover: var(--accent);
--button-background: var(--surface);
--button-border-radius: var(--radius-field);
--button-padding: 14px;
--button-box-shadow: none;
--field-height: 36px;
--field-border-radius: var(--radius-field);
--field-border-color: var(--field-border);
--field-background: var(--field-bg);
--field-color: var(--ink-title);
--field-focus-border-color: var(--accent);
--field-placeholder-color: var(--ink-muted);
--field-check-color: var(--accent);
--field-disabled-background: var(--neutral-bg);
--field-disabled-text-color: var(--ink-muted);
--field-disabled-border: var(--surface-border);
--panel-background: var(--glass-card);
--panel-border-color: var(--glass-line);
--panel-border-radius: var(--radius-lg);
--panel-box-shadow: var(--shadow-shell);
--panel-header-background: transparent;
--panel-header-color: var(--ink-title);
--panel-header-border-color: var(--glass-line);
--panel-header-font-size: 15px;
--panel-header-font-weight: 600;
--panel-header-padding-vertical: 14px;
--panel-header-padding-horizontal: 16px;
--panel-footer-background: transparent;
--modal-background: var(--surface);
--modal-header-background: var(--sidebar-mid);
--modal-header-color: #ffffff;
--modal-footer-background: var(--page);
--tab-background: transparent;
--tab-color: var(--ink-muted);
--tab-border-color: transparent;
--tab-active-background: var(--surface);
--tab-active-color: var(--accent);
--tab-active-border-color: var(--accent);
--tab-border-radius: var(--radius-sm);
--tab-font-size: 13px;
--tab-font-weight: 600;
--table-header-background: var(--accent-tint);
--table-header-color: var(--ink-muted);
--table-header-border-color: var(--glass-line);
--table-header-font-size: 11px;
--table-header-font-weight: 700;
--table-header-padding-vertical: 12px;
--table-body-color: var(--ink);
--tr-even-background: transparent;
--tr-odd-background: var(--accent-tint);
--tr-hover-background: rgba(var(--accent-rgb), 0.14);
--tr-hover-color: var(--ink-title);
--color-green: var(--gain);
--color-red: var(--loss);
--color-blue: var(--brand-blue);
--color-orange: var(--warn-ink);
--color-purple: var(--brand-violet);
--login-background-color: var(--brand-navy);
--login-panel-header-background: var(--surface);
--login-panel-left-background-color: var(--brand-navy);
--login-panel-right-background-color: var(--surface);
--login-panel-detail-display: flex;
--login-panel-max-width: 880px;
--login-panel-border-radius: var(--radius-xl);
--login-panel-box-shadow: var(--shadow-hero);
--login-form-box-shadow: none;
--login-title-color: var(--ink-title);
--login-header-color: var(--ink-muted);
--login-border-color: var(--surface-border);
--login-link-color: var(--accent);
--login-button-background: var(--primary);
--login-button-text-color: var(--on-primary);
--login-text-center-color: var(--ink-title);
--login-panel-left-text-header-color: #ffffff;
--login-panel-left-text-footer-color: #ffffff;
--login-panel-max-height: 560px;
}