/* ==========================================================================
   Erfolgsmagneten – Design Tokens
   Verbindliche Basis für alle Seiten. Farben ausschließlich aus der
   Markenwelt Gold/Orange · Schwarz · Weiß plus funktionale Zwischentöne.
   ========================================================================== */

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Markenfarben ------------------------------------------------------ */
  --em-gold-100: #fbecc8;
  --em-gold-300: #efb32e;   /* Oberkante Logo-Verlauf, oberer Bogen */
  --em-gold-500: #d59321;   /* Mitte Logo-Verlauf */
  --em-gold-700: #9e5512;   /* Unterkante Logo-Verlauf */
  --em-gold-ink: #95500f;   /* Gold als Textfarbe auf Hell (Kontrast ≥ 5:1) */
  --em-gold-gradient: linear-gradient(180deg, #ecad2c 0%, #c17c1d 55%, #9e5512 100%);
  --em-gold-gradient-x: linear-gradient(100deg, #efb32e 0%, #d59321 50%, #a85d14 100%);

  --em-black: #11110d;      /* warmes Schwarz, abgeleitet vom Logo-Hintergrund */
  --em-black-2: #191915;    /* erhöhte Flächen auf Dunkel */
  --em-black-3: #24231e;
  --em-white: #ffffff;

  /* --- Funktionale Zwischentöne (warm, nie dominant) --------------------- */
  --em-paper: #f5f3ee;      /* ruhige helle Alternativfläche */
  --em-stone-100: #ebe8e1;
  --em-stone-200: #dcd8cf;
  --em-stone-400: #a6a197;
  --em-stone-500: #8a857b;
  --em-stone-600: #66625a;  /* Sekundärtext auf Hell (≥ 5:1) */
  --em-stone-300d: #a8a49a; /* Sekundärtext auf Dunkel (≥ 7:1) */

  /* --- Typografie -------------------------------------------------------- */
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(3rem, 0.9rem + 9.6vw, 10rem);
  --fs-h2: clamp(2.25rem, 1.25rem + 3.6vw, 4.75rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --fs-h4: 1.1875rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;

  --lh-tight: 0.95;
  --lh-head: 1.04;
  --lh-body: 1.6;

  --tracking-display: -0.045em;
  --tracking-head: -0.03em;
  --tracking-label: 0.14em;

  /* --- Abstände (4er-Raster) -------------------------------------------- */
  --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: 6rem;
  --space-10: 8rem;
  --section-y: clamp(5.5rem, 3rem + 9vw, 11rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 3rem);
  --container: 1320px;
  --container-narrow: 920px;

  /* --- Formen ----------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Bewegung --------------------------------------------------------- */
  --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-base: 320ms;
  --dur-slow: 900ms;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   Themen: jede Sektion setzt data-theme="light" | "paper" | "dark".
   Komponenten nutzen nur diese semantischen Variablen.
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --bg: var(--em-white);
  --surface: var(--em-paper);
  --surface-raised: var(--em-white);
  --fg: var(--em-black);
  --fg-muted: var(--em-stone-600);
  --fg-faint: var(--em-stone-400);
  --line: rgba(17, 17, 13, 0.1);
  --line-strong: rgba(17, 17, 13, 0.22);
  --accent: var(--em-gold-500);
  --accent-text: var(--em-gold-ink);
  --btn-bg: var(--em-black);
  --btn-fg: var(--em-white);
  --btn-knob-bg: var(--em-gold-gradient);
  --btn-knob-fg: var(--em-black);
  --focus: var(--em-gold-700);
}

[data-theme="paper"] {
  --bg: var(--em-paper);
  --surface: var(--em-white);
  --surface-raised: var(--em-white);
}

[data-theme="dark"] {
  --bg: var(--em-black);
  --surface: var(--em-black-2);
  --surface-raised: var(--em-black-3);
  --fg: var(--em-white);
  --fg-muted: var(--em-stone-300d);
  --fg-faint: #6f6b62;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.24);
  --accent: var(--em-gold-300);
  --accent-text: var(--em-gold-300);
  --btn-bg: var(--em-white);
  --btn-fg: var(--em-black);
  --btn-knob-bg: var(--em-black);
  --btn-knob-fg: var(--em-gold-300);
  --focus: var(--em-gold-300);
}