/* ==========================================================================
   SCHWAB Cargo Logistik — Design Tokens (Variables)
   Industrial Premium: Dark, Powerful, Orange Accent
   ========================================================================== */

:root {
  /* === Colors === */
  --color-primary: #1a1a2e;
  --color-primary-light: #242442;
  --color-primary-dark: #0f0f1a;
  --color-accent: #e65100;
  --color-accent-light: #ff7d2e;
  --color-accent-dark: #bf4400;
  --color-text: #f0f0f0;
  --color-text-secondary: #b0b0c0;
  --color-text-muted: #8a8a9a;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-surface: #ffffff;
  --color-surface-text: #1a1a2e;
  --color-bg: #1a1a2e;
  --color-bg-elevated: #242442;
  --color-surface-elevated: rgba(255, 255, 255, 0.08);
  --skeleton-base: #1e1e3a;
  --skeleton-shine: #2a2a4a;
  --color-success: #2e7d32;
  --color-warning: #f57f17;
  --color-error: #c62828;

  /* === Typography — Fluid (clamp, NO fixed px) === */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-hero: clamp(3rem, 8vw + 1rem, 7rem);
  --fs-h1: clamp(2.5rem, 5vw + 1rem, 5rem);
  --fs-h2: clamp(1.8rem, 3vw + 0.8rem, 3.5rem);
  --fs-h3: clamp(1.3rem, 2vw + 0.5rem, 2rem);
  --fs-h4: clamp(1.1rem, 1vw + 0.5rem, 1.5rem);
  --fs-body: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  --fs-sm: clamp(0.8rem, 0.3vw + 0.7rem, 0.875rem);
  --fs-xs: clamp(0.7rem, 0.2vw + 0.6rem, 0.75rem);
  --fs-lead: clamp(1.1rem, 0.8vw + 0.9rem, 1.35rem);

  --lh-tight: 1.1;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* === Spacing — Fluid === */
  --space-xs: clamp(4px, 0.5vw, 8px);
  --space-sm: clamp(8px, 1vw, 16px);
  --space-md: clamp(16px, 2vw, 32px);
  --space-lg: clamp(32px, 4vw, 64px);
  --space-xl: clamp(48px, 6vw, 96px);
  --space-2xl: clamp(64px, 8vw, 128px);
  --space-section: clamp(80px, 12vw, 180px);
  --space-card: clamp(16px, 2vw, 32px);

  /* === Layout === */
  --container-max: 1280px;
  --container-padding: clamp(16px, 4vw, 48px);

  /* === Radius === */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: clamp(12px, 2vw, 24px);
  --radius-xl: clamp(16px, 2.5vw, 32px);
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.6);

  /* === Z-Index === */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-grain: 9999;

  /* === Easing === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* === Transitions === */
  --transition-fast: 120ms var(--ease-out);
  --transition-normal: 200ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* === Nav / Overlay (dark mode defaults) === */
  --color-nav-bg: rgba(26, 26, 46, 0.85);
  --color-nav-overlay: rgba(26, 26, 46, 0.97);
  --color-scrollbar-track: var(--color-primary-dark);
}

/* === LIGHT MODE (manual toggle) === */
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-bg-elevated: #f5f5f5;
  --color-text: #1a1a2e;
  --color-text-secondary: #4a4a5e;
  --color-text-muted: #6a6a7e;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-surface: #1a1a2e;
  --color-surface-text: #f0f0f0;
  --color-surface-elevated: rgba(0, 0, 0, 0.05);
  --skeleton-base: #e8e8e8;
  --skeleton-shine: #f5f5f5;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.2);
  /* Nav & overlay adapt to light mode */
  --color-nav-bg: rgba(255, 255, 255, 0.9);
  --color-nav-overlay: rgba(255, 255, 255, 0.97);
  --color-scrollbar-track: #e8e8e8;
}

/* === LIGHT MODE (system preference) === */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: #ffffff;
    --color-bg-elevated: #f5f5f5;
    --color-text: #1a1a2e;
    --color-text-secondary: #4a4a5e;
    --color-text-muted: #6a6a7e;
    --color-border: rgba(0, 0, 0, 0.1);
    --color-surface: #1a1a2e;
    --color-surface-text: #f0f0f0;
    --color-surface-elevated: rgba(0, 0, 0, 0.05);
    --skeleton-base: #e8e8e8;
    --skeleton-shine: #f5f5f5;
    --color-nav-bg: rgba(255, 255, 255, 0.9);
    --color-nav-overlay: rgba(255, 255, 255, 0.97);
    --color-scrollbar-track: #e8e8e8;
  }
}

/* === Dark-scoped sections: always light text regardless of theme === */
.section-dark,
.footer,
.hero {
  --color-text: #f0f0f0;
  --color-text-secondary: #b0b0c0;
  --color-text-muted: #8a8a9a;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-bg-elevated: #242442;
  --color-surface-elevated: rgba(255, 255, 255, 0.08);
  --color-accent-light: #ff7d2e;
}