/* ============================================
   CARROSSERIE CATALANO — CSS Variables
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,700&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* Farben */
  --color-primary: #fe9a06;
  --color-primary-dark: #d97f00;
  --color-primary-light: #ffb340;
  --color-secondary: #1c1716;
  --color-secondary-mid: #2d2826;
  --color-secondary-light: #3e3936;

  --color-bg: #f8f6f3;
  --color-bg-alt: #f0ede8;
  --color-bg-dark: #1c1716;

  --color-text: #1c1716;
  --color-text-muted: #706d6c;
  --color-text-light: #9c9896;
  --color-white: #ffffff;
  --color-border: #e2ddd8;
  --color-border-dark: #3e3936;

  /* Typografie */
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  --font-size-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.875rem);
  --font-size-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  --font-size-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --font-size-md:   clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --font-size-lg:   clamp(1.5rem,   1.35rem + 0.75vw, 2rem);
  --font-size-xl:   clamp(2rem,     1.75rem + 1.25vw, 3rem);
  --font-size-2xl:  clamp(2.5rem,   2.1rem  + 2vw,    4rem);
  --font-size-3xl:  clamp(3rem,     2.5rem  + 2.5vw,  5rem);

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.5rem;
  --space-lg:  3rem;
  --space-xl:  5rem;
  --space-2xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --topbar-height: 36px;
  --nav-height: 70px;
  --header-height: 106px; /* topbar + nav */

  /* Misc */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 2px 8px rgba(28, 23, 22, 0.08);
  --shadow-md: 0 8px 32px rgba(28, 23, 22, 0.14);
  --shadow-lg: 0 16px 48px rgba(28, 23, 22, 0.20);

  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;
}