/* ============================================
   DESIGN TOKENS — Single Source of Truth
   Rheinheimer Sanitär · Heizung · Klima
   ============================================ */

:root {
  /* ---------- COLORS ---------- */
  /* Brand */
  --color-primary: #4EB8E0;
  --color-primary-hover: #3AA2C9;
  --color-primary-dark: #2A8AAE;
  --color-primary-light: #C7E8F4;
  --color-primary-50: #EEF8FC;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-neutral-50: #F8F9FB;
  --color-neutral-100: #F1F3F6;
  --color-neutral-200: #E4E7EC;
  --color-neutral-300: #CDD2DB;
  --color-neutral-400: #98A0AE;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #2A2F38;
  --color-neutral-800: #1A1D23;
  --color-neutral-900: #111111;
  --color-neutral-950: #0A0B0E;

  /* Semantic */
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverse: var(--color-white);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-neutral-50);
  --color-bg-dark: var(--color-neutral-900);
  --color-surface: var(--color-white);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);

  /* Status */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* ---------- TYPOGRAPHY ---------- */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale */
  --text-xs:    clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --text-sm:    clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --text-lg:    clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 1.18rem + 0.36vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
  --text-3xl:   clamp(1.875rem, 1.7rem + 0.88vw, 2.5rem);
  --text-4xl:   clamp(2.5rem, 2.2rem + 1.5vw, 3.5rem);
  --text-5xl:   clamp(3rem, 2.5rem + 2.5vw, 4.75rem);

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

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* ---------- SPACING (8pt-Grid) ---------- */
  --space-1:  0.25rem;  /*   4px */
  --space-2:  0.5rem;   /*   8px */
  --space-3:  0.75rem;  /*  12px */
  --space-4:  1rem;     /*  16px */
  --space-5:  1.5rem;   /*  24px */
  --space-6:  2rem;     /*  32px */
  --space-7:  3rem;     /*  48px */
  --space-8:  4rem;     /*  64px */
  --space-9:  6rem;     /*  96px */
  --space-10: 8rem;     /* 128px */
  --space-11: 10rem;    /* 160px */

  /* ---------- RADII ---------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(17, 17, 17, 0.06), 0 2px 4px -2px rgba(17, 17, 17, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(17, 17, 17, 0.08), 0 4px 8px -4px rgba(17, 17, 17, 0.05);
  --shadow-xl: 0 24px 48px -8px rgba(17, 17, 17, 0.12), 0 8px 16px -8px rgba(17, 17, 17, 0.06);
  --shadow-2xl: 0 40px 80px -12px rgba(17, 17, 17, 0.18);
  --shadow-brand: 0 12px 32px -8px rgba(78, 184, 224, 0.4);

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-content: 960px;
  --container-narrow: 720px;
  --container-px: clamp(1rem, 4vw, 2rem);

  /* ---------- MOTION ---------- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Z-INDEX ---------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 5000;
  --z-cookie: 9999;
}