/* ============================================================
   CTC – Car Tech Center | Design Tokens v2
   Refined Industrial Luxury – Multi-Page Architecture
   Typography: DM Sans (headlines) + Instrument Sans (body)
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --ctc-blue-primary: #0044CC;
  --ctc-blue-light: #3377FF;
  --ctc-blue-dark: #002299;
  --ctc-blue-vivid: #0055FF;
  --ctc-blue-electric: #1a6fff;
  --ctc-silver: #7a7a88;
  --ctc-chrome: #c0c0cc;
  --ctc-metallic: linear-gradient(135deg, #c0c0cc 0%, #e8e8ee 50%, #c0c0cc 100%);

  /* ── Surfaces ── */
  --ctc-bg: #FAFAFE;
  --ctc-bg-rgb: 250, 250, 254;
  --ctc-surface: #F0F0F6;
  --ctc-surface-elevated: #E8E8F0;
  --ctc-surface-accent: #E6EEFF;
  --ctc-border: rgba(0, 0, 40, 0.07);
  --ctc-border-strong: rgba(0, 0, 40, 0.14);

  /* ── Text ── */
  --ctc-text-primary: #0D0D1A;
  --ctc-text-secondary: #44445A;
  --ctc-text-muted: #7E7E94;
  --ctc-text-on-blue: #FFFFFF;

  /* ── Accents ── */
  --ctc-accent-glow: rgba(0, 68, 204, 0.10);
  --ctc-accent-glow-strong: rgba(0, 68, 204, 0.22);
  --ctc-blue-gradient: linear-gradient(135deg, #0044CC 0%, #2266FF 50%, #0055FF 100%);
  --ctc-blue-gradient-text: linear-gradient(135deg, #0044CC, #3388FF, #0055FF);
  --ctc-shimmer: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
  --ctc-hero-overlay: linear-gradient(135deg, rgba(0, 0, 20, 0.75) 0%, rgba(0, 30, 80, 0.55) 50%, rgba(0, 0, 20, 0.7) 100%);

  /* ── Texture ── */
  --ctc-grain-opacity: 0.025;
  --ctc-noise-filter: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  --ctc-diagonal-pattern: repeating-linear-gradient(-45deg,
      transparent,
      transparent 40px,
      rgba(0, 68, 204, 0.02) 40px,
      rgba(0, 68, 204, 0.02) 41px);

  /* ── Semantic ── */
  --ctc-success: #16A34A;
  --ctc-warning: #EAB308;
  --ctc-error: #DC2626;

  /* ── Spacing Scale (fluid) ── */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: clamp(12px, 1.5vw, 16px);
  --space-lg: clamp(16px, 2.2vw, 24px);
  --space-xl: clamp(24px, 3vw, 32px);
  --space-2xl: clamp(32px, 4.5vw, 48px);
  --space-3xl: clamp(40px, 5.5vw, 64px);
  --space-4xl: clamp(48px, 6.5vw, 80px);
  --space-5xl: clamp(64px, 9vw, 120px);

  /* ── Section Padding ── */
  --section-padding-y: var(--space-5xl);
  --section-padding-x: clamp(16px, 4vw, 24px);

  /* ── Typography ── */
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --font-size-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-xl: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --font-size-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --font-size-4xl: clamp(1.75rem, 1.3rem + 2.25vw, 2.75rem);
  --font-size-5xl: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  --font-size-hero: clamp(2.25rem, 1.5rem + 4.5vw, 4.5rem);
  --font-size-page-hero: clamp(1.75rem, 1.2rem + 3.5vw, 3.5rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-widest: 0.12em;

  /* ── Border Radius ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 30, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 30, 0.07);
  --shadow-lg: 0 8px 32px rgba(0, 0, 30, 0.09);
  --shadow-xl: 0 20px 60px rgba(0, 0, 30, 0.12);
  --shadow-blue: 0 4px 24px rgba(0, 68, 204, 0.18);
  --shadow-blue-lg: 0 8px 48px rgba(0, 68, 204, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-theme: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-cookie: 500;

  /* ── Container ── */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;

  /* ── Nav ── */
  --nav-height: 72px;
  --nav-bg: rgba(250, 250, 254, 0.88);
  --nav-blur: blur(20px);
}

/* ════════════════════════════════════════════════
   DARK MODE – Cinematic Depth
   ════════════════════════════════════════════════ */

[data-theme="dark"] {
  --ctc-blue-primary: #2266FF;
  --ctc-blue-light: #4488FF;
  --ctc-blue-dark: #0033BB;
  --ctc-blue-vivid: #3377FF;
  --ctc-blue-electric: #4d9aff;
  --ctc-silver: #9898A8;
  --ctc-chrome: #CCCCDD;
  --ctc-metallic: linear-gradient(135deg, #888899 0%, #bbbbcc 50%, #888899 100%);

  --ctc-bg: #06060F;
  --ctc-bg-rgb: 6, 6, 15;
  --ctc-surface: #0E0E1C;
  --ctc-surface-elevated: #16162A;
  --ctc-surface-accent: #0D1B3A;
  --ctc-border: rgba(255, 255, 255, 0.06);
  --ctc-border-strong: rgba(255, 255, 255, 0.12);

  --ctc-text-primary: #EDEDF5;
  --ctc-text-secondary: #9898AC;
  --ctc-text-muted: #5C5C72;

  --ctc-accent-glow: rgba(34, 102, 255, 0.12);
  --ctc-accent-glow-strong: rgba(34, 102, 255, 0.30);
  --ctc-blue-gradient: linear-gradient(135deg, #1155DD 0%, #4488FF 50%, #3377FF 100%);
  --ctc-blue-gradient-text: linear-gradient(135deg, #3388FF, #66AAFF, #3388FF);
  --ctc-shimmer: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.04) 50%, transparent 70%);
  --ctc-hero-overlay: linear-gradient(135deg, rgba(0, 0, 12, 0.82) 0%, rgba(0, 20, 60, 0.6) 50%, rgba(0, 0, 12, 0.78) 100%);

  --ctc-grain-opacity: 0.04;
  --ctc-diagonal-pattern: repeating-linear-gradient(-45deg,
      transparent,
      transparent 40px,
      rgba(34, 102, 255, 0.025) 40px,
      rgba(34, 102, 255, 0.025) 41px);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.65);
  --shadow-blue: 0 4px 24px rgba(34, 102, 255, 0.22);
  --shadow-blue-lg: 0 8px 48px rgba(34, 102, 255, 0.35);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);

  --nav-bg: rgba(6, 6, 15, 0.88);
}