/* BeerenKlima 2.0 — Design Tokens */

:root {
  /* Surfaces */
  --bg:            oklch(1.000 0.000 0);
  --surface:       oklch(0.978 0.008 150);
  --surface-2:     oklch(0.951 0.014 150);
  --surface-deep:  oklch(0.230 0.030 160);

  /* Text */
  --ink:           oklch(0.190 0.022 160);
  --ink-soft:      oklch(0.330 0.020 160);
  --muted:         oklch(0.490 0.018 160);
  --ink-invert:    oklch(0.965 0.008 150);
  --muted-invert:  oklch(0.780 0.012 150);

  /* Brand */
  --primary:       oklch(0.350 0.077 160);
  --primary-deep:  oklch(0.265 0.062 160);
  --primary-tint:  oklch(0.930 0.022 160);

  /* Accent — Beerenrot */
  --accent:        oklch(0.475 0.165 25);
  --accent-deep:   oklch(0.385 0.155 25);
  --accent-soft:   oklch(0.940 0.030 25);

  /* Lines */
  --rule:          oklch(0.900 0.010 160);
  --rule-strong:   oklch(0.750 0.014 160);
  --rule-invert:   oklch(1 0 0 / 0.18);

  /* Typography */
  --font-display: 'Spectral', 'Iowan Old Style', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Modular type scale — ratio 1.25, fluid clamp */
  --step--1:   clamp(0.85rem,  0.81rem + 0.18vw, 0.95rem);
  --step-0:    clamp(1.00rem,  0.95rem + 0.25vw, 1.125rem);
  --step-1:    clamp(1.25rem,  1.16rem + 0.45vw, 1.45rem);
  --step-2:    clamp(1.563rem, 1.42rem + 0.7vw,  1.85rem);
  --step-3:    clamp(1.953rem, 1.74rem + 1.1vw,  2.4rem);
  --step-4:    clamp(2.441rem, 2.10rem + 1.7vw,  3.2rem);
  --step-5:    clamp(3.052rem, 2.50rem + 2.7vw,  4.5rem);
  --step-hero: clamp(2.8rem,   2.0rem + 4.2vw,   5.6rem);

  /* Spacing — 8px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: clamp(4rem, 3rem + 4vw, 7rem);
  --space-10: clamp(6rem, 4rem + 6vw, 10rem);

  /* Layout */
  --container: 1240px;
  --container-narrow: 880px;
  --reading: 68ch;

  /* Radius — sparingly */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid: 380ms;
  --dur-slow: 720ms;

  /* Elevation */
  --shadow-sm: 0 1px 2px oklch(0.19 0.022 160 / 0.04), 0 2px 6px oklch(0.19 0.022 160 / 0.04);
  --shadow:    0 4px 16px oklch(0.19 0.022 160 / 0.06), 0 1px 2px oklch(0.19 0.022 160 / 0.05);
  --shadow-lg: 0 12px 36px oklch(0.19 0.022 160 / 0.10), 0 2px 6px oklch(0.19 0.022 160 / 0.06);

  /* z-index scale */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-overlay: 50;
  --z-modal: 100;
}