/* ==========================================================================
   DESIGN SYSTEM — Autohaus Reuters
   All design tokens in one place. Change here → changes everywhere.
   ========================================================================== */

:root {
  /* ── Colors ───────────────────────────────────────────────────────────── */
  --color-primary:        #CC0000;
  --color-primary-dark:   #A30000;
  --color-primary-light:  #E63333;

  --color-dark:           #0F1923;
  --color-dark-light:     #1A2A38;
  --color-dark-lighter:   #243544;

  --color-white:          #FFFFFF;
  --color-offwhite:       #F5F5F7;
  --color-gray-100:       #F0F0F2;
  --color-gray-200:       #E5E5E7;
  --color-gray-300:       #D1D1D6;
  --color-gray-400:       #A1A1AA;
  --color-gray-500:       #71717A;
  --color-gray-600:       #52525B;
  --color-gray-700:       #3F3F46;
  --color-gray-800:       #27272A;

  --color-text:           #1A1A1A;
  --color-text-secondary: #6B7280;
  --color-text-light:     rgba(255, 255, 255, 0.85);
  --color-text-on-dark:   #FFFFFF;

  --color-success:        #16A34A;
  --color-error:          #DC2626;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-heading:  'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:    clamp(0.75rem,  0.7rem  + 0.25vw, 0.8125rem);   /* ~12-13px */
  --text-sm:    clamp(0.8125rem, 0.775rem + 0.25vw, 0.875rem);  /* ~13-14px */
  --text-base:  clamp(0.9375rem, 0.9rem  + 0.25vw, 1rem);       /* ~15-16px */
  --text-lg:    clamp(1.0625rem, 1rem    + 0.35vw, 1.125rem);   /* ~17-18px */
  --text-xl:    clamp(1.25rem,   1.15rem + 0.5vw,  1.5rem);     /* ~20-24px */
  --text-2xl:   clamp(1.5rem,    1.3rem  + 0.8vw,  2rem);       /* ~24-32px */
  --text-3xl:   clamp(1.875rem,  1.5rem  + 1.2vw,  2.5rem);     /* ~30-40px */
  --text-4xl:   clamp(2.25rem,   1.8rem  + 1.5vw,  3.25rem);    /* ~36-52px */
  --text-5xl:   clamp(2.75rem,   2rem    + 2vw,    4rem);        /* ~44-64px */

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

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

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --space-xs:   0.25rem;   /* 4px  */
  --space-sm:   0.5rem;    /* 8px  */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */
  --space-5xl:  8rem;      /* 128px */

  --section-padding: clamp(3rem, 5vw, 6rem);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container-max:    1280px;
  --container-narrow: 960px;
  --container-wide:   1440px;
  --container-padding: clamp(1rem, 3vw, 2rem);

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

  --border-light: 1px solid var(--color-gray-200);
  --border-dark:  1px solid rgba(255, 255, 255, 0.1);

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 50px rgba(0, 0, 0, 0.16);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ────────────────────────────────────────────────────── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-header:    300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;

  /* ── Header Heights ───────────────────────────────────────────────────── */
  --topbar-height:  40px;
  --header-height:  80px;
  --header-height-scrolled: 64px;
  --header-total:   calc(var(--topbar-height) + var(--header-height));

  /* ── Breakpoints (for reference — used in media queries) ──────────────── */
  /* sm:  640px   */
  /* md:  768px   */
  /* lg:  1024px  */
  /* xl:  1280px  */
  /* 2xl: 1536px  */
}