/* =========================================================================
   DESIGN TOKENS — Kati Beruf
   Premium Editorial · Academic Authority · 2026 CSS
   ========================================================================= */

:root {
  /* -- Color Foundation ---------------------------------------------------- */
  --ink-900: oklch(14% 0.02 30);          /* deepest text */
  --ink-700: oklch(25% 0.025 30);
  --ink-500: oklch(40% 0.022 30);         /* secondary text */
  --ink-300: oklch(62% 0.02 35);          /* muted */
  --ink-100: oklch(88% 0.015 40);

  --paper-50:  oklch(98.5% 0.012 78);     /* base ivory */
  --paper-100: oklch(96.5% 0.016 76);
  --paper-200: oklch(92% 0.02 72);
  --paper-300: oklch(86% 0.022 68);

  /* Brand — tief-akademisches Tannengrün + warmer Ocker-Akzent */
  --forest-900: oklch(22% 0.06 155);      /* deep forest */
  --forest-700: oklch(35% 0.08 155);
  --forest-500: oklch(52% 0.1 155);

  --ember-600: oklch(62% 0.15 55);        /* warm terracotta/ember */
  --ember-500: oklch(68% 0.16 55);
  --ember-300: oklch(84% 0.08 55);

  /* Semantic */
  --bg:            var(--paper-50);
  --bg-subtle:     var(--paper-100);
  --bg-elevated:   oklch(100% 0 0);
  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-500);
  --fg-faint:      var(--ink-300);
  --accent:        var(--forest-700);
  --accent-strong: var(--forest-900);
  --accent-warm:   var(--ember-600);
  --border:        color-mix(in oklch, var(--ink-900) 12%, transparent);
  --border-strong: color-mix(in oklch, var(--ink-900) 22%, transparent);

  /* -- Typography ---------------------------------------------------------- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --step--2: clamp(0.75rem, 0.72rem + 0.15vw, 0.83rem);
  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.97rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.44rem);
  --step-2:  clamp(1.56rem, 1.42rem + 0.7vw, 1.95rem);
  --step-3:  clamp(1.95rem, 1.7rem + 1.25vw, 2.7rem);
  --step-4:  clamp(2.44rem, 2.05rem + 1.95vw, 3.75rem);
  --step-5:  clamp(3.05rem, 2.4rem + 3.25vw, 5.25rem);
  --step-6:  clamp(3.8rem, 2.8rem + 5vw, 7.3rem);

  /* -- Layout -------------------------------------------------------------- */
  --edge-x: clamp(1.25rem, 4vw, 3rem);
  --col-narrow: 38rem;
  --col-regular: 52rem;
  --col-wide: 72rem;
  --col-full: 88rem;

  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;
  --radius-xl: 28px;

  --shadow-low: 0 1px 2px oklch(14% 0.02 30 / 0.06), 0 2px 6px oklch(14% 0.02 30 / 0.04);
  --shadow-mid: 0 6px 18px oklch(14% 0.02 30 / 0.08), 0 18px 40px oklch(14% 0.02 30 / 0.06);
  --shadow-high: 0 24px 60px oklch(14% 0.02 30 / 0.14);

  /* -- Motion -------------------------------------------------------------- */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-s: 180ms;
  --dur-m: 320ms;
  --dur-l: 560ms;
  --dur-xl: 900ms;
}

/* Dark mode via light-dark() scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            oklch(13% 0.015 45);
    --bg-subtle:     oklch(17% 0.02 45);
    --bg-elevated:   oklch(20% 0.022 45);
    --fg:            oklch(95% 0.015 75);
    --fg-muted:      oklch(75% 0.02 65);
    --fg-faint:      oklch(55% 0.02 60);
    --accent:        oklch(62% 0.11 155);
    --accent-strong: oklch(78% 0.13 155);
    --accent-warm:   oklch(72% 0.15 55);
    --border:        color-mix(in oklch, oklch(100% 0 0) 10%, transparent);
    --border-strong: color-mix(in oklch, oklch(100% 0 0) 20%, transparent);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}