/* Calovation Design-Tokens des Shops. Einzige Datei mit Rohwerten; Komponenten nutzen var(--…). Schrift Barlow wie calovation.de (OFL, static/fonts/barlow.css). */
:root {
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --palette-ink-950: #07141a; --palette-ink-900: #0d1c24; --palette-ink-800: #15303b; --palette-ink-700: #1f4552;
  --palette-gray-0: #ffffff; --palette-gray-25: #f8fafb; --palette-gray-50: #f1f5f6; --palette-gray-100: #e8eef0; --palette-gray-200: #d8e1e4;
  --palette-gray-300: #b9c6cb; --palette-gray-500: #5f7279; --palette-gray-700: #334850; --palette-gray-900: #0f1f26;
  --palette-teal-50: #e9faf7; --palette-teal-100: #cdf4ec; --palette-teal-300: #7fe5d4; --palette-teal-400: #4fd1c5; --palette-teal-500: #22b8a8; --palette-teal-600: #138f84; --palette-teal-700: #0e6b63;
  --palette-amber-100: #fff1d6; --palette-amber-400: #d9a441; --palette-amber-700: #7d500c;
  --palette-red-100: #fbeae5; --palette-red-400: #d98e7c; --palette-red-700: #9b2f1c;
  --palette-blue-100: #eaf1fb; --palette-blue-700: #1f4f99;

  --color-bg-page: var(--palette-gray-25); --color-surface: var(--palette-gray-0); --color-surface-muted: var(--palette-gray-50); --color-surface-sunken: var(--palette-gray-100);
  --color-border: var(--palette-gray-200); --color-border-strong: var(--palette-gray-300);
  --color-text: var(--palette-gray-900); --color-text-muted: var(--palette-gray-500); --color-text-on-dark: #eef6f7; --color-text-muted-on-dark: #9db5bb;
  --color-action: var(--palette-ink-900); --color-action-hover: var(--palette-ink-700); --color-text-on-action: var(--palette-gray-0);
  --color-accent: var(--palette-teal-500); --color-accent-strong: var(--palette-teal-600); --color-accent-soft: var(--palette-teal-50); --color-accent-bright: var(--palette-teal-400); --color-text-on-accent: var(--palette-ink-950);
  --color-focus: var(--palette-teal-500);
  --color-dark: var(--palette-ink-900); --color-dark-2: var(--palette-ink-800);
  --color-ok-bg: var(--palette-teal-100); --color-ok-text: var(--palette-teal-700);
  --color-warn-bg: var(--palette-amber-100); --color-warn-text: var(--palette-amber-700);
  --color-danger-bg: var(--palette-red-100); --color-danger-text: var(--palette-red-700); --color-danger: #b4432c;
  --color-info-bg: var(--palette-blue-100); --color-info-text: var(--palette-blue-700);

  --radius-s: 6px; --radius-m: 12px; --radius-l: 20px; --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgba(13, 28, 36, .06); --shadow-m: 0 8px 24px -12px rgba(13, 28, 36, .25); --shadow-l: 0 24px 60px -24px rgba(13, 28, 36, .35);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 104px;
  --text-xs: .78rem; --text-s: .9rem; --text-m: 1rem; --text-l: 1.15rem; --text-xl: 1.45rem; --text-2xl: 2rem; --text-3xl: clamp(2.2rem, 4.5vw, 3.4rem);
  --wrap: 1200px; --wrap-narrow: 760px; --ease: 180ms ease;
}