/* =========================================================================
   Koller Metallbautechnik — Design Tokens
   Abgeleitet aus dem verbindlichen Designsystem (temp_mk/Koller Design System)
   ========================================================================= */

:root {
  /* Primär — Petrol */
  --c-primary-950: oklch(16% 0.035 200);
  --c-primary-900: oklch(20% 0.045 200);
  --c-primary-700: oklch(30% 0.07 200);
  --c-primary-600: oklch(38% 0.085 200); /* Basis */
  --c-primary-500: oklch(46% 0.09 200);
  --c-primary-400: oklch(56% 0.09 200);
  --c-primary-100: oklch(93% 0.025 200);
  --c-primary-50:  oklch(97% 0.012 200);

  /* Neutral — kühles Grau */
  --c-ink-950: oklch(17% 0.012 235);   /* Haupttext */
  --c-ink-800: oklch(30% 0.01 235);
  --c-ink-600: oklch(45% 0.008 235);   /* sek. Text */
  --c-ink-400: oklch(62% 0.006 235);
  --c-line-300: oklch(80% 0.005 235);
  --c-line-200: oklch(89% 0.004 235); /* Border */
  --c-surface-100: oklch(94% 0.003 235); /* Karten/Zebrastreifen */
  --c-surface-50: oklch(97% 0.002 235);  /* Seitenhintergrund */
  --c-white: #ffffff;

  /* Signalfarben */
  --c-success-600: oklch(48% 0.10 148);
  --c-success-100: oklch(94% 0.035 148);
  --c-warning-600: oklch(58% 0.12 80);
  --c-warning-100: oklch(94% 0.045 80);
  --c-danger-600: oklch(50% 0.14 25);
  --c-danger-100: oklch(94% 0.03 25);

  /* Typografie */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;

  --fs-display: 40px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

  /* Abstände — 4px Basisraster */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radius */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-pill: 999px;

  /* Schatten */
  --shadow-sm: 0 1px 2px oklch(20% 0.01 235 / 0.08);
  --shadow-md: 0 2px 8px oklch(20% 0.01 235 / 0.10);
  --shadow-lg: 0 8px 24px oklch(20% 0.01 235 / 0.16);

  /* Layout */
  --sidebar-width: 252px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 68px;
  --mobile-nav-height: 64px;
  --touch-min: 44px;
  --max-content: 1320px;
}