/* ============================================================
   KATRIN OKUPNIK — DESIGN TOKENS
   Imported 1:1 from the Claude Design system
   "katrin-okupnik-design-system-f85b29ac".
   Colors · Typography · Spacing/Radius/Motion
   ============================================================ */

:root {
  /* ==========================================================
     COLORS
     Each major color owns a mood/role — sections pick ONE
     dominant mood at a time rather than mixing all colors.
     ========================================================== */

  /* Papier — warm off-white, the main canvas */
  --papier: #FAF3E8;
  --papier-rgb: 250, 243, 232;

  /* Tinte — near-black anthracite, primary text/ink */
  --tinte: #19181B;
  --tinte-rgb: 25, 24, 27;
  --tinte-soft: #5B5852;

  /* Kobalt — bold blue, the central brand color */
  --kobalt: #4149AC;
  --kobalt-rgb: 65, 73, 172;
  --kobalt-dark: #303684;
  --kobalt-tint: #E6E7F5;

  /* Limette — fresh lime, high-energy accent */
  --limette: #BFCF75;
  --limette-rgb: 191, 207, 117;
  --limette-dark: #A1B457;

  /* Koralle — warm coral, secondary accent */
  --koralle: #EC8368;
  --koralle-rgb: 236, 131, 104;
  --koralle-dark: #D26A50;

  /* Lavendel — light lavender, calm surfaces */
  --lavendel: #E7E1FB;
  --lavendel-rgb: 231, 225, 251;
  --lavendel-dark: #C9BCF2;

  /* Rosé — soft rosé, personal/human content */
  --rose: #F6D7DD;
  --rose-rgb: 246, 215, 221;
  --rose-dark: #EBB7C1;

  /* Pure values used sparingly */
  --white: #FFFFFF;
  --border: #E4DCCC;
  --border-strong: #19181B;

  /* Semantic aliases */
  --surface-page: var(--papier);
  --surface-card: var(--white);
  --surface-card-calm: var(--lavendel);
  --surface-card-warm: var(--rose);
  --surface-inverse: var(--tinte);
  --surface-brand: var(--kobalt);
  --surface-accent: var(--limette);
  --surface-accent-2: var(--koralle);

  --text-primary: var(--tinte);
  --text-muted: var(--tinte-soft);
  --text-on-dark: var(--papier);
  --text-on-brand: var(--white);
  --text-on-accent: var(--tinte);
  --text-link: var(--kobalt);
  --text-link-hover: var(--kobalt-dark);

  --focus-ring: var(--kobalt);
  --border-default: var(--border);
  --shadow-color: 25, 24, 27;

  /* ==========================================================
     TYPOGRAPHY
     Primary: Plus Jakarta Sans · Accent: Instrument Serif Italic
     Fluid sizes via clamp(mobile, fluid, desktop).
     ========================================================== */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-serif-accent: "Instrument Serif", Georgia, serif;

  /* Hero — desktop 96 / tablet 72 / mobile 44 */
  --text-hero: clamp(2.75rem, 7vw, 6rem);
  --lh-hero: 1.02;
  --ls-hero: -0.02em;
  --fw-hero: 700;
  --measure-hero: 16ch;

  /* H1 — 64 / 48 / 34 */
  --text-h1: clamp(2.125rem, 5vw, 4rem);
  --lh-h1: 1.08;
  --ls-h1: -0.015em;
  --fw-h1: 700;
  --measure-h1: 20ch;

  /* H2 — 44 / 36 / 28 */
  --text-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --lh-h2: 1.14;
  --ls-h2: -0.01em;
  --fw-h2: 700;
  --measure-h2: 24ch;

  /* H3 — 32 / 26 / 22 */
  --text-h3: clamp(1.375rem, 2.6vw, 2rem);
  --lh-h3: 1.2;
  --ls-h3: -0.005em;
  --fw-h3: 600;

  /* H4 — 24 / 20 / 18 */
  --text-h4: clamp(1.125rem, 1.9vw, 1.5rem);
  --lh-h4: 1.3;
  --ls-h4: 0em;
  --fw-h4: 600;

  /* Intro / lead paragraph — 22 / 20 / 18 */
  --text-intro: clamp(1.125rem, 1.6vw, 1.375rem);
  --lh-intro: 1.5;
  --fw-intro: 500;
  --measure-intro: 42ch;

  /* Body copy — 18 / 17 / 16 */
  --text-body: clamp(1rem, 1.35vw, 1.125rem);
  --lh-body: 1.6;
  --fw-body: 400;
  --measure-body: 62ch;

  /* Small description — 14 / 14 / 13 */
  --text-small: clamp(0.8125rem, 1.1vw, 0.875rem);
  --lh-small: 1.5;
  --fw-small: 400;

  /* Navigation — 16 / 16 / 15 */
  --text-nav: 1rem;
  --fw-nav: 600;
  --ls-nav: 0em;

  /* Buttons — 16 / 16 / 15 */
  --text-button: 1rem;
  --fw-button: 600;
  --ls-button: 0.01em;

  /* Labels / eyebrows — 13 / 13 / 12, uppercase */
  --text-label: 0.8125rem;
  --fw-label: 600;
  --ls-label: 0.08em;

  /* Quotes — 28 / 24 / 20, italic serif accent */
  --text-quote: clamp(1.25rem, 2.3vw, 1.75rem);
  --lh-quote: 1.45;
  --fw-quote: 400;

  /* Breakpoints used across the layout system */
  --bp-mobile: 480px;
  --bp-tablet: 834px;
  --bp-desktop: 1200px;
  --bp-wide: 1440px;

  /* ==========================================================
     SPACING · LAYOUT · RADIUS · MOTION
     8px base spacing system.
     ========================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  --space-section: var(--space-10);
  --space-section-mobile: var(--space-8);
  --space-block: var(--space-7);

  --page-max: 1360px;
  --content-max: 760px;
  --gutter-desktop: 32px;
  --gutter-tablet: 24px;
  --gutter-mobile: 20px;
  --outer-margin-desktop: 96px;
  --outer-margin-tablet: 48px;
  --outer-margin-mobile: 20px;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-2xl: 48px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(var(--shadow-color), 0.06);
  --shadow-md: 0 8px 24px rgba(var(--shadow-color), 0.08);
  --shadow-lg: 0 24px 64px rgba(var(--shadow-color), 0.12);

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}