/* ==========================================================================
   KickAssCars.com -Design Tokens / CSS Custom Properties
   Dark, aggressive, automotive-inspired theme
   Matte black + Racing red + Chrome silver
   ========================================================================== */

:root {
  /* ── Backgrounds ─────────────────────────────────────────────────────── */
  --bg: #0D0D0D;
  --bg-card: #141414;
  --surface: #1A1A1A;
  --bg-hover: #1E1E1E;
  --bg-elevated: #222222;

  /* ── Primary (Racing Red) ────────────────────────────────────────────── */
  --primary: #E63946;
  --primary-hover: #FF4D5A;
  --primary-muted: rgba(230, 57, 70, 0.1);
  --primary-strong: rgba(230, 57, 70, 0.25);

  /* ── Secondary (Chrome Silver) ───────────────────────────────────────── */
  --secondary: #C0C0C0;
  --secondary-hover: #D4D4D4;
  --secondary-muted: rgba(192, 192, 192, 0.1);

  /* ── Accent (Electric Blue -links, highlights) ──────────────────────── */
  --accent: #00A8E8;
  --accent-hover: #33BBEF;
  --accent-muted: rgba(0, 168, 232, 0.1);

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text: #F5F5F5;
  --text-muted: #999999;
  --text-subtle: #666666;
  --text-inverse: #0D0D0D;

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --border: #2A2A2A;
  --border-strong: #444444;
  --border-focus: var(--primary);

  /* ── Semantic Colors ──────────────────────────────────────────────────── */
  --success: #22C55E;
  --success-muted: rgba(34, 197, 94, 0.1);
  --warning: #F59E0B;
  --warning-muted: rgba(245, 158, 11, 0.1);
  --error: #EF4444;
  --error-muted: rgba(239, 68, 68, 0.1);
  --info: #00A8E8;
  --info-muted: rgba(0, 168, 232, 0.1);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Code',
    Consolas, 'Liberation Mono', Menlo, monospace;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow-red: 0 0 20px rgba(230, 57, 70, 0.3);
  --shadow-glow-blue: 0 0 20px rgba(0, 168, 232, 0.3);

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

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container-max: 1400px;
  --container-narrow: 800px;
  --container-wide: 1600px;
  --header-height: 64px;

  /* ── Spacing Scale ────────────────────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ── Z-Index Layers ───────────────────────────────────────────────────── */
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 80;
  --z-navbar: 90;
  --z-modal-backdrop: 100;
  --z-modal: 110;
  --z-toast: 120;
  --z-lightbox: 1000;
  --z-max: 9999;
}