/* ============================================================
   Troca Inteligente V2 — Design Tokens
   Enterprise TMS · semantic tokens · dark + light
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* Typography */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", "Segoe UI Mono", ui-monospace, monospace;
  --font-xs: 0.75rem;
  --font-sm: 0.8125rem;
  --font-md: 0.875rem;
  --font-lg: 1.0625rem;
  --font-xl: 1.375rem;
  --font-2xl: 1.75rem;
  --font-kpi: 1.5rem;

  --lh-tight: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Layout */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 64px;
  --content-max: 1480px;
  --z-sidebar: 40;
  --z-topbar: 30;
  --z-dropdown: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-tooltip: 90;

  /* Motion */
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-medium: 240ms;
  --motion-slow: 400ms;
  --motion-kpi: 520ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* Brand accents (shared) */
  --primary: #2f6fed;
  --primary-hover: #4580f5;
  --primary-pressed: #1f58c9;
  --primary-soft: rgba(47, 111, 237, 0.16);
  --accent: #f06a1a;
  --accent-hover: #ff7d33;
  --accent-soft: rgba(240, 106, 26, 0.16);
  --success: #22a86b;
  --success-soft: rgba(34, 168, 107, 0.16);
  --warning: #e8a317;
  --warning-soft: rgba(232, 163, 23, 0.16);
  --danger: #e24b4b;
  --danger-soft: rgba(226, 75, 75, 0.16);
  --info: #3d8bfd;
  --info-soft: rgba(61, 139, 253, 0.16);

  /* Default = dark (enterprise control tower) */
  color-scheme: dark;
  --bg: #0b1220;
  --bg-secondary: #101a2c;
  --surface: #152238;
  --surface-elevated: #1b2b44;
  --surface-hover: #223456;
  --border: #2a3d5c;
  --border-soft: #1e2f4a;
  --border-strong: #3a5278;
  --text-primary: #eef3fb;
  --text-secondary: #aeb9cd;
  --text-muted: #7d8aa3;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.18);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35);
  --overlay: rgba(4, 10, 22, 0.55);
  --sidebar-bg: #0a1424;
  --sidebar-border: #16243c;
  --topbar-bg: rgba(16, 26, 44, 0.92);
  --table-stripe: rgba(255, 255, 255, 0.015);
  --row-selected: rgba(47, 111, 237, 0.12);
  --focus-ring: 0 0 0 3px var(--primary-soft);
  --skeleton-base: #1a2a42;
  --skeleton-shine: #243656;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9;
  --bg-secondary: #ebeef5;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-hover: #eef2f8;
  --border: #d5dde8;
  --border-soft: #e2e8f0;
  --border-strong: #b8c4d6;
  --text-primary: #0f1b2d;
  --text-secondary: #4a5a73;
  --text-muted: #718099;
  --shadow-soft: 0 1px 2px rgba(15, 27, 45, 0.04), 0 4px 12px rgba(15, 27, 45, 0.06);
  --shadow-elevated: 0 10px 28px rgba(15, 27, 45, 0.12);
  --overlay: rgba(15, 27, 45, 0.4);
  --sidebar-bg: #0c1526;
  --sidebar-border: #16243c;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --table-stripe: rgba(15, 27, 45, 0.02);
  --row-selected: rgba(47, 111, 237, 0.08);
  --primary: #1f5fd6;
  --primary-hover: #2f6fed;
  --primary-soft: rgba(31, 95, 214, 0.12);
  --skeleton-base: #e6ebf3;
  --skeleton-shine: #f4f6fa;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-normal: 1ms;
    --motion-medium: 1ms;
    --motion-slow: 1ms;
    --motion-kpi: 1ms;
  }
}