/* ==========================================================
   DESIGN TOKEN SYSTEM — Anywhere Car Care
   Three-layer architecture: Primitive → Semantic → Component
   Brand: Automotive Red + Chrome Silver on Deep Black
   ========================================================== */


/* =====================================================
   LAYER 1 — PRIMITIVES
   ===================================================== */
:root {

  /* Color Primitives */
  --color-black-950: hsl(0, 0%, 4%);
  --color-black-900: hsl(0, 0%, 7%);
  --color-black-800: hsl(0, 0%, 10%);
  --color-black-700: hsl(0, 0%, 14%);
  --color-black-600: hsl(0, 0%, 20%);
  --color-gray-600:  hsl(0, 0%, 35%);
  --color-gray-500:  hsl(0, 0%, 45%);
  --color-gray-400:  hsl(0, 0%, 56%);
  --color-gray-300:  hsl(0, 0%, 72%);
  --color-gray-200:  hsl(0, 0%, 87%);
  --color-gray-100:  hsl(0, 0%, 94%);
  --color-gray-50:   hsl(0, 0%, 97%);
  --color-white:     hsl(0, 0%, 100%);

  /* Brand Red — matches logo */
  --color-red-800: hsl(0, 85%, 25%);
  --color-red-700: hsl(0, 85%, 32%);
  --color-red-600: hsl(0, 85%, 40%);
  --color-red-500: hsl(0, 88%, 48%);
  --color-red-400: hsl(0, 88%, 60%);
  --color-red-300: hsl(0, 88%, 74%);
  --color-red-100: hsl(0, 80%, 94%);

  /* Chrome Silver — secondary from logo */
  --color-silver-400: hsl(0, 0%, 75%);
  --color-silver-300: hsl(0, 0%, 85%);
  --color-silver-200: hsl(0, 0%, 92%);

  /* Spacing Primitives — 4px base scale */
  --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-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Typography Primitives */
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  3rem;
  --font-size-6xl:  3.75rem;
  --font-size-7xl:  4.5rem;
  --font-size-8xl:  6rem;

  /* Radius Primitives */
  --radius-none: 0;
  --radius-sm:   0.125rem;
  --radius-base: 0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-3xl:  1.5rem;
  --radius-full: 9999px;

  /* Shadow Primitives */
  --shadow-xs: 0 1px 2px   rgba(0, 0, 0, 0.50);
  --shadow-sm: 0 2px 8px   rgba(0, 0, 0, 0.55);
  --shadow-md: 0 4px 16px  rgba(0, 0, 0, 0.60);
  --shadow-lg: 0 8px 32px  rgba(0, 0, 0, 0.70);
  --shadow-xl: 0 16px 56px rgba(0, 0, 0, 0.80);

  /* Duration Primitives */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   500ms;
  --duration-xslow:  800ms;

  /* Easing Primitives */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel:    cubic-bezier(0, 0, 0.2, 1);
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =====================================================
   LAYER 2 — SEMANTIC
   ===================================================== */
:root {

  /* Backgrounds */
  --color-bg:              var(--color-black-950);
  --color-bg-raised:       var(--color-black-800);
  --color-bg-elevated:     var(--color-black-700);
  --color-bg-overlay:      var(--color-black-600);
  --color-bg-light:        var(--color-gray-50);
  --color-bg-light-raised: var(--color-gray-100);

  /* Foregrounds */
  --color-fg:              var(--color-white);
  --color-fg-secondary:    var(--color-gray-300);
  --color-fg-muted:        var(--color-gray-400);
  --color-fg-subtle:       var(--color-gray-500);
  --color-fg-on-light:     var(--color-black-900);
  --color-fg-muted-light:  var(--color-gray-600);

  /* Brand — Red primary */
  --color-primary:         var(--color-red-500);
  --color-primary-hover:   var(--color-red-400);
  --color-primary-active:  var(--color-red-600);
  --color-primary-dark:    var(--color-red-700);
  --color-primary-fg:      var(--color-white);
  --color-primary-subtle:  hsla(0, 88%, 48%, 0.12);
  --color-primary-glow:    hsla(0, 88%, 48%, 0.30);
  --color-primary-glow-lg: hsla(0, 88%, 48%, 0.45);

  /* Borders */
  --color-border:          var(--color-black-700);
  --color-border-strong:   var(--color-black-600);
  --color-border-subtle:   var(--color-black-800);
  --color-border-on-light: var(--color-gray-200);

  /* Semantic Spacing */
  --spacing-xs:      var(--space-2);
  --spacing-sm:      var(--space-4);
  --spacing-md:      var(--space-6);
  --spacing-lg:      var(--space-8);
  --spacing-xl:      var(--space-12);
  --spacing-2xl:     var(--space-16);
  --spacing-3xl:     var(--space-24);
  --spacing-section: var(--space-20);

  /* Semantic Shadows */
  --shadow-card:       var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg);
  --shadow-red:        0 4px 24px  var(--color-primary-glow);
  --shadow-red-lg:     0 8px 48px  var(--color-primary-glow-lg);

  /* Typography */
  --font-heading: 'Work Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-body:    'Work Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:   -0.025em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.04em;
  --letter-spacing-wider:    0.08em;
  --letter-spacing-widest:   0.15em;

  /* Z-index Scale */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
}


/* =====================================================
   LAYER 3 — COMPONENTS
   ===================================================== */
:root {

  /* ── Button: Primary ── */
  --btn-bg:             var(--color-primary);
  --btn-fg:             var(--color-primary-fg);
  --btn-hover-bg:       var(--color-primary-hover);
  --btn-active-bg:      var(--color-primary-active);
  --btn-shadow:         var(--shadow-red);
  --btn-hover-shadow:   var(--shadow-red-lg);
  --btn-radius:         var(--radius-base);
  --btn-padding-x:      var(--space-8);
  --btn-padding-y:      var(--space-4);
  --btn-height:         3rem;
  --btn-font-size:      var(--font-size-sm);
  --btn-font-weight:    700;
  --btn-letter-spacing: var(--letter-spacing-wider);
  --btn-text-transform: uppercase;

  /* ── Button: Secondary ── */
  --btn-sec-bg:         transparent;
  --btn-sec-fg:         var(--color-primary);
  --btn-sec-border:     var(--color-primary);
  --btn-sec-hover-bg:   var(--color-primary-subtle);
  --btn-sec-radius:     var(--btn-radius);
  --btn-sec-padding-x:  var(--btn-padding-x);
  --btn-sec-padding-y:  var(--btn-padding-y);

  /* ── Navigation ── */
  --nav-bg:               rgba(10, 10, 10, 0.97);
  --nav-height:           4.5rem;
  --nav-border:           var(--color-border);
  --nav-logo-color:       var(--color-fg);
  --nav-link-color:       var(--color-fg-muted);
  --nav-link-hover-color: var(--color-primary);
  --nav-blur:             saturate(180%) blur(20px);

  /* ── Section / Layout ── */
  --section-pad-y:  var(--spacing-section);
  --section-max-w:  1200px;
  --section-pad-x:  var(--space-6);
  --section-safe-w: min(var(--section-max-w), 100% - var(--section-pad-x) * 2);

  /* ── Hero ── */
  --hero-min-h:    100svh;
  --hero-grad:     linear-gradient(to bottom,
                     rgba(8,8,8,0.92) 0%,
                     rgba(8,8,8,0.74) 45%,
                     rgba(8,8,8,0.94) 100%);
  --hero-glow:     radial-gradient(ellipse 80% 60% at 50% 40%,
                     hsla(0,88%,48%,0.06) 0%,
                     transparent 70%);

  /* ── Trust Bar ── */
  --trust-bar-bg:       var(--color-bg-raised);
  --trust-bar-border:   var(--color-border);
  --trust-number-color: var(--color-primary);
  --trust-number-size:  var(--font-size-4xl);
  --trust-label-color:  var(--color-fg-muted);

  /* ── Service Card ── */
  --svc-card-bg:           var(--color-bg-raised);
  --svc-card-border:       var(--color-border);
  --svc-card-border-hover: var(--color-primary);
  --svc-card-radius:       var(--radius-xl);
  --svc-card-pad:          var(--space-8);
  --svc-card-shadow:       var(--shadow-card);
  --svc-card-hover-shadow: var(--shadow-card-hover);
  --svc-featured-border:   var(--color-primary);
  --svc-featured-shadow:   var(--shadow-red);
  --svc-icon-size:         3rem;
  --svc-icon-color:        var(--color-primary);
  --svc-icon-bg:           var(--color-primary-subtle);
  --svc-icon-radius:       var(--radius-xl);

  /* ── Testimonial ── */
  --testi-bg:          var(--color-bg-raised);
  --testi-border:      var(--color-border);
  --testi-radius:      var(--radius-xl);
  --testi-pad:         var(--space-8);
  --testi-star-color:  var(--color-primary);
  --testi-avatar-bg:   var(--color-primary-subtle);
  --testi-avatar-fg:   var(--color-primary);
  --testi-avatar-size: 2.75rem;

  /* ── Badge ── */
  --badge-bg:      var(--color-primary);
  --badge-fg:      var(--color-primary-fg);
  --badge-radius:  var(--radius-full);
  --badge-pad:     var(--space-1) var(--space-3);
  --badge-size:    var(--font-size-xs);
  --badge-weight:  700;
  --badge-spacing: var(--letter-spacing-wider);

  /* ── CTA Banner ── */
  --cta-banner-bg:   linear-gradient(135deg,
                       var(--color-black-900) 0%,
                       var(--color-black-800) 100%);
  --cta-banner-glow: radial-gradient(ellipse 70% 80% at 50% 50%,
                       hsla(0,88%,48%,0.09) 0%,
                       transparent 65%);

  /* ── Photo Placeholder ── */
  --photo-placeholder-bg:     var(--color-bg-elevated);
  --photo-placeholder-border: var(--color-border-strong);
  --photo-placeholder-label:  var(--color-fg-muted);

  /* ── Footer ── */
  --footer-bg:         var(--color-black-900);
  --footer-border:     var(--color-border);
  --footer-fg:         var(--color-fg-muted);
  --footer-link-hover: var(--color-primary);
}