/**
 * CSS Design System - Variables
 * R3P Transport
 */

:root {
  /* ===================
     COLOR PALETTE
     =================== */

  /* Primary - Diesel Black (strength, heavy equipment) */
  --color-primary: #111113;
  --color-primary-dark: #08080A;
  --color-primary-light: #1E1F24;
  --color-primary-rgb: 17, 17, 19;

  /* Accent - R3P Red (from the logo) */
  --color-accent: #D7191F;
  --color-accent-dark: #A90F14;
  --color-accent-light: #F0353B;
  --color-accent-rgb: 215, 25, 31;

  /* Chrome */
  --color-chrome: #C9CDD3;
  --color-chrome-dark: #8D939C;

  /* Neutral */
  --color-text: #17181B;
  --color-text-muted: #4B4F57;
  --color-text-light: #6B7079;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F3F3F1;
  --color-bg-dark: #E7E7E4;
  --color-border: #E0E0DC;
  --color-border-dark: #C8C8C3;

  /* On dark surfaces */
  --color-on-dark: #F5F5F4;
  --color-on-dark-muted: #B4B7BD;
  --color-dark-border: rgba(255, 255, 255, 0.12);

  /* Semantic */
  --color-success: #059669;
  --color-error: #DC2626;


  /* ===================
     TYPOGRAPHY
     =================== */

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', var(--font-primary);

  /* Font Sizes (Fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.6rem + 2vw, 2.875rem);
  --text-4xl: clamp(2.5rem, 1.9rem + 3vw, 4rem);
  --text-5xl: clamp(3rem, 2rem + 5vw, 5.25rem);

  /* Line Heights */
  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;


  /* ===================
     SPACING
     =================== */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Section Spacing */
  --section-padding: clamp(3.5rem, 6vw, 6.5rem);
  --container-padding: clamp(1rem, 3vw, 2rem);


  /* ===================
     LAYOUT
     =================== */

  --container-max: 1240px;
  --container-narrow: 800px;
  --header-height: 76px;

  /* Border Radius - squared-off, industrial */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 9999px;


  /* ===================
     SHADOWS
     =================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.14);


  /* ===================
     TRANSITIONS
     =================== */

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;


  /* ===================
     Z-INDEX
     =================== */

  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 500;


  /* ===================
     FOCUS
     =================== */

  --focus-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.45);
}


/* ===================
   REDUCED MOTION
   =================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}