/* === Montserrat self-hosted (Original-Logo-Schrift) === */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/Montserrat-900.woff2") format("woff2"); }

/* JSE 2026 v4 — Design Tokens (frisch geschrieben nach Master-Blueprint v4) */
:root {
  /* === Color System === */
  --ink-900: #0a0e14;
  --ink-800: #13181f;
  --ink-700: #1c2025;
  --ink-600: #2a2f37;
  --paper:    #fafaf8;
  --paper-tint: #f4f4ee;
  --text-on-ink: #ffffff;
  --text-on-ink-muted: rgba(255, 255, 255, 0.78);
  --text-on-ink-dim: rgba(255, 255, 255, 0.55);
  --text-on-paper: #0a0e14;
  --text-on-paper-muted: #4a4e58;
  --accent: #FFD400;
  --accent-dark: #d4af00;
  --cyan: #22d3ee;
  --danger: #c62828;
  --success: #2e7d32;
  --border-on-ink: rgba(255, 255, 255, 0.08);
  --border-on-paper: rgba(0, 0, 0, 0.08);

  /* === Typography === */
  --font-display: "Montserrat", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.4rem, 5.5vw, 4.6rem);
  --fs-h1: clamp(2rem, 4vw, 3.6rem);
  --fs-h2: clamp(1.6rem, 2.8vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 1.8vw, 1.4rem);
  --fs-lead: clamp(1rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-meta: 0.85rem;
  --fs-eyebrow: 0.72rem;

  /* === Spacing-Scale === */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-12: 200px;

  /* === Radius (eckig fuer Editorial) === */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-xl: 16px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --glow-accent: 0 0 24px rgba(255, 212, 0, 0.18);

  /* === Container === */
  --content-narrow: 60ch;
  --content-prose: 72ch;
  --content-wide: 1280px;
  --content-full: 1600px;

  /* === Transitions === */
  --t-fast: 0.18s ease;
  --t-base: 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-slow: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-editorial: 1s cubic-bezier(0.2, 0.8, 0.2, 1);

  /* === z-index === */
  --z-base: 1;
  --z-sticky: 50;
  --z-banner: 60;
  --z-modal: 100;
  --z-toast: 110;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0s;
    --t-base: 0s;
    --t-slow: 0s;
    --t-editorial: 0s;
  }
}