/* ==========================================================================
   ETNA DESIGN TOKENS — Shared across all portals
   Premium dark theme with glassmorphism, electric blue primary
   ========================================================================== */
:root {
  /* Typography */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-display: 'Outfit', sans-serif;

  /* Base Surfaces */
  --bg-base: hsl(225, 44%, 8%);
  --bg-elevated: hsl(225, 44%, 10%);
  --bg-sidebar: hsla(225, 44%, 12%, 0.92);
  --bg-card-glass: hsla(225, 36%, 14%, 0.58);
  --bg-input: hsla(225, 44%, 7%, 0.75);
  --bg-hover: hsla(225, 44%, 18%, 0.4);
  --bg-hover-strong: hsla(225, 44%, 22%, 0.6);

  /* Borders */
  --border-glass: hsla(225, 24%, 28%, 0.42);
  --border-glass-light: hsla(225, 24%, 36%, 0.24);
  --border-glass-hover: hsla(225, 24%, 40%, 0.55);
  --border-focus: hsl(215, 92%, 58%);
  --border-error: hsl(4, 82%, 58%);

  /* Primary — Electric Blue */
  --primary: hsl(215, 92%, 58%);
  --primary-hover: hsl(215, 92%, 68%);
  --primary-glow: hsla(215, 92%, 58%, 0.22);
  --primary-surface: hsla(215, 92%, 58%, 0.10);
  --primary-strong: hsla(215, 92%, 58%, 0.18);

  /* Secondary — Violet Accent */
  --secondary: hsl(265, 72%, 62%);
  --secondary-glow: hsla(265, 72%, 62%, 0.18);
  --secondary-surface: hsla(265, 72%, 62%, 0.10);

  /* Semantic Colors */
  --success: hsl(152, 68%, 46%);
  --success-hover: hsl(152, 68%, 56%);
  --success-glow: hsla(152, 68%, 46%, 0.18);
  --success-surface: hsla(152, 68%, 46%, 0.10);

  --warning: hsl(38, 92%, 52%);
  --warning-glow: hsla(38, 92%, 52%, 0.18);
  --warning-surface: hsla(38, 92%, 52%, 0.10);

  --error: hsl(4, 82%, 58%);
  --error-hover: hsl(4, 82%, 48%);
  --error-glow: hsla(4, 82%, 58%, 0.18);
  --error-surface: hsla(4, 82%, 58%, 0.10);

  /* Text */
  --text-main: hsl(210, 40%, 98%);
  --text-muted: hsl(218, 18%, 62%);
  --text-subtle: hsl(218, 14%, 42%);
  --text-dark: hsl(225, 44%, 10%);
  --text-on-primary: hsl(0, 0%, 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
  --shadow-md: 0 8px 24px 0 rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 16px 48px 0 rgba(0, 0, 0, 0.38);
  --shadow-glow: 0 0 24px 0 var(--primary-glow);
  --shadow-glow-success: 0 0 20px 0 var(--success-glow);
  --shadow-glow-warning: 0 0 20px 0 var(--warning-glow);

  /* Radius */
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition: all 0.28s var(--ease-smooth);
  --transition-fast: all 0.15s var(--ease-smooth);

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* Z-index scale */
  --z-bg: 0;
  --z-content: 10;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-modal: 500;
  --z-toast: 1000;
  --z-loader: 9999;
}

/* Portal-specific overrides */
:root[data-theme="driver"] {
  --bg-base: hsl(222, 47%, 11%);
  --bg-elevated: hsl(222, 47%, 13%);
  --bg-sidebar: hsla(223, 47%, 16%, 0.9);
  --primary: hsl(210, 100%, 56%);
  --primary-hover: hsl(210, 100%, 66%);
  --primary-glow: hsla(210, 100%, 56%, 0.3);
  --bg-card-glass: hsla(223, 47%, 16%, 0.7);
}

:root[data-theme="login"] {
  --bg-base: hsl(240, 8%, 5%);
  --bg-elevated: hsl(240, 10%, 7%);
  --bg-card-glass: hsla(240, 10%, 8%, 0.62);
  --border-glass: hsla(0, 0%, 100%, 0.06);
  --primary: hsl(4, 80%, 58%);
  --primary-hover: hsl(4, 72%, 44%);
  --primary-glow: hsla(4, 80%, 58%, 0.35);
}