/* =========================================================================
   Pizza di Angelo – Fuoco · tokens.css
   Design-Tokens, Schriften und Sektions-Theming (dark/light).
   Eine Datenquelle für Farben, Typo-Skala und Layout — hier ändern,
   überall wirksam.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) Schriften — selbst gehostet (SIL OFL), keine externe Verbindung.
   Beide sind Variable Fonts: eine Datei deckt alle Schnitte ab.
   ------------------------------------------------------------------------- */

/* Fraunces — Display: Headlines, Zitate, Pizza-Namen. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: italic;
  font-display: swap;
}

/* Inter — Body: Fliesstext, UI, Navigation. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Fallback-Schriften mit angeglichenen Metriken (size-adjust & Overrides).
   Sie belegen fast exakt denselben Platz wie die Webfonts → kein
   Layout-Sprung (CLS), solange die echten Fonts noch laden.
   Inter-Metriken: etablierte Werte gegen Arial.
   Fraunces-Metriken: an Georgia angenähert (Feinschliff bei Bedarf). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 104%;
}

/* -------------------------------------------------------------------------
   2) Globale Tokens (varianten-unabhängig).
   ------------------------------------------------------------------------- */
:root {
  /* Schrift-Stacks */
  --pda-font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --pda-font-body: "Inter", "Inter Fallback", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Dunkle Palette — „Fuoco" */
  --pda-dark-bg: #191512;          /* Seiten-/Sektionshintergrund dunkel */
  --pda-dark-bg-alt: #1e1915;      /* minimal heller — Rhythmus jede 2. Sektion */
  --pda-dark-surface: #241f1a;     /* Karten dunkel */
  --pda-dark-border: #2e2823;
  --pda-dark-border-strong: #4a3f35;
  --pda-dark-text: #f5efe6;
  --pda-dark-text-2: #b8afa4;
  --pda-dark-text-3: #8c8378;

  /* Akzente */
  --pda-accent: #e8551f;           /* Flammen-Orange: CTAs, Hover, Fokus */
  --pda-accent-hover: #cf4715;     /* minimal dunkler für :hover */
  --pda-accent-ink: #fff3ec;       /* Text auf Akzent */
  --pda-gold: #d9a05b;             /* Sterne, Eyebrows */

  /* Typo-Skala (fluid) */
  --pda-fs-hero: clamp(2.1rem, 5.5vw, 3.6rem);
  --pda-fs-h2: clamp(1.5rem, 3.2vw, 2.2rem);
  --pda-fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --pda-fs-body: clamp(1rem, 1.1vw, 1.0625rem);
  --pda-fs-small: 0.875rem;
  --pda-fs-eyebrow: 0.6875rem;     /* 11px */

  /* Layout */
  --pda-radius: 12px;
  --pda-radius-sm: 8px;
  --pda-radius-pill: 999px;
  --pda-container: 72rem;
  --pda-container-text: 44rem;     /* max. Zeilenbreite für SEO-Fliesstext */
  --pda-space: clamp(3.5rem, 8vw, 6.5rem);   /* vertikaler Sektionsabstand */
  --pda-gap: clamp(1rem, 2.5vw, 1.75rem);
  --pda-pad-x: clamp(1.25rem, 5vw, 2.5rem);  /* horizontaler Seitenrand */

  /* Sonstiges */
  --pda-header-h: 4.5rem;          /* Höhe Sticky-Header → scroll-margin-top */
  --pda-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pda-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* -------------------------------------------------------------------------
   3) Sektions-Theming — die semantischen Tokens (--bg, --text, …) werden
   über die Sektionsklasse gesetzt. Sektionen und Komponenten benutzen NUR
   diese semantischen Variablen, nie die dark-Rohwerte.
   ------------------------------------------------------------------------- */
.section--dark {
  --bg: var(--pda-dark-bg);
  --surface: var(--pda-dark-surface);
  --border: var(--pda-dark-border);
  --border-strong: var(--pda-dark-border-strong);
  --text: var(--pda-dark-text);
  --text-2: var(--pda-dark-text-2);
  --text-3: var(--pda-dark-text-3);
  --eyebrow: var(--pda-gold);
  --link: var(--pda-accent);
  --btn-secondary-border: var(--pda-dark-border-strong);
  color-scheme: dark;
}

/* 3.3 — Subtiler Hintergrund-Rhythmus: jede zweite dunkle Sektion
   erhält den minimal helleren Ton. Rein über die nth-Position der <section>,
   keine Einzelfall-Styles. Die Offerte-Sektion behält ihren wärmeren Glow
   (liegt als Overlay über dem Hintergrund). */
.section--dark:nth-of-type(even) {
  --bg: var(--pda-dark-bg-alt);
}

/* Seiten-Grundfarbe = dunkel (Hero/Footer sind in beiden Varianten dunkel;
   verhindert helles Aufblitzen an den Rändern). */
:root {
  --bg: var(--pda-dark-bg);
  --text: var(--pda-dark-text);
  --link: var(--pda-accent);
}