/* dondus design tokens — generiert von theme.dondus.com (CMS-editierbar) */
:root {
  /* Typografie — Familien & Gewichte */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Typografie — Skala */
  --text-display: clamp(56px, 9vw, 128px);
  --text-h1: clamp(40px, 5.5vw, 72px);
  --text-h2: clamp(28px, 3.5vw, 44px);
  --text-h3: 24px;
  --text-lead: 20px;
  --text-body: 16px;
  --text-small: 14px;
  --text-meta: 12px;
  --leading-display: 0.95;
  --leading-tight: 1.1;
  --leading-body: 1.55;
  --tracking-display: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-meta: 0.08em;

  /* Farben — Basis (Papier & Tinte) */
  --paper: #f2f1ed;
  --paper-2: #e9e7e1;
  --surface: #ffffff;
  --ink: #16150f;
  --ink-2: #64625a;
  --ink-3: #9c9a90;
  --line: #d8d5cc;
  --line-strong: #16150f;

  /* Farben — Akzent & Invertiert */
  --accent: oklch(0.63 0.21 38);
  --accent-hover: oklch(0.56 0.21 38);
  --accent-ink: #ffffff;
  --accent-soft: oklch(0.93 0.04 38);
  --invert-bg: #16150f;
  --invert-ink: #f2f1ed;
  --invert-ink-2: #9c9a90;

  /* Farben — Semantik */
  --ok: oklch(0.62 0.14 150);
  --ok-soft: oklch(0.93 0.05 150);
  --warn: oklch(0.72 0.15 80);
  --warn-soft: oklch(0.94 0.06 90);
  --danger: oklch(0.55 0.19 27);
  --danger-soft: oklch(0.93 0.05 27);

  /* Semantische Aliase */
  --bg-page: var(--paper);
  --bg-section: var(--paper-2);
  --surface-card: var(--surface);
  --text-main: var(--ink);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --border-default: var(--line);
  --border-focus: var(--ink);
  --link: var(--ink);
  --link-hover: var(--accent);
  --scrim: rgba(22, 21, 15, 0.4);

  /* Raum, Radien, Linien */
  --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: 160px;
  --radius-0: 0px;
  --radius-s: 4px;
  --radius-pill: 999px;
  --border-w: 1px;
  --shadow-float: 0 12px 40px rgba(22, 21, 15, 0.14);
  --shadow-pop: 0 4px 16px rgba(22, 21, 15, 0.10);

  /* Layout & Responsive */
  --container-max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1100px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;
  --dur-hero: 1100ms;
  --reveal-shift: 32px;
}

/* Motion-Keyframes (Werte kommen aus den Tokens) */
@keyframes ds-reveal {
  from { opacity: 0; transform: translateY(var(--reveal-shift)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-rise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}
@keyframes ds-unmask {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}