/* ==========================================================================
   Luantic — Design Tokens
   Breakpoints (documented, not interpolatable in CSS vars — used literally
   throughout layout.css / components.css / slider.css):
     640px  – große Handys / kleine Tablets
     960px  – Tablet / kleines Laptop-Fenster (Nav klappt darunter zusammen)
     1200px – Desktop (Galerie mehrspaltig)
     1440px – große Desktops (Content-Max-Width greift)
   ========================================================================== */

:root {
  /* ---- Farben (identisch zur Perumnas-Referenz: helles Creme/Weiß,
     beinahe-schwarzer Text, blauer Himmel-Gradient im Hero — kein Gold,
     keine dunklen Sektionen als Seitenhintergrund) ---- */
  --color-ink: #16161a;
  --color-ink-70: rgba(22, 22, 26, 0.68);
  --color-ink-45: rgba(22, 22, 26, 0.45);
  --color-ink-15: rgba(22, 22, 26, 0.12);

  --color-paper: #ffffff;
  --color-paper-70: rgba(255, 255, 255, 0.7);
  --color-paper-45: rgba(255, 255, 255, 0.45);

  /* Himmel-Gradient für den Hero (Foto-Hero-Hintergrund, wie im Referenzbild) */
  --color-sky-top: #90b3d4;
  --color-sky-mid: #c3d8e8;
  --color-sky-bottom: #ffffff;

  /* Nur innerhalb der Vorher/Nachher-Slider-Komponente verwendet (Kelvin-
     Visualisierung des Slider-Handles) — bewusst NICHT als Seiten-Akzentfarbe
     eingesetzt, um dem referenzgetreuen, farbneutralen Look treu zu bleiben. */
  --color-gold: #c9973f;
  --color-gold-dark: #a87b2c;
  --color-gold-15: rgba(201, 151, 63, 0.14);
  --color-slate: #6b7a8f;
  --color-slate-15: rgba(107, 122, 143, 0.14);

  --color-border: #e6e6e6;
  --color-border-on-ink: rgba(255, 255, 255, 0.14);

  --color-danger: #b3452f;

  /* Oberflächen */
  --surface-paper: var(--color-paper);
  --surface-ink: var(--color-ink);

  /* ---- Typografie: eine einzige klare Grotesk-Schrift für alles, wie in
     der Referenz — keine Serife, keine Monospace-Absetzung. ---- */
  --font-display: "General Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-body: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-mono: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  --text-h1: clamp(2.75rem, 2rem + 3.2vw, 5.25rem);
  --text-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --text-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --text-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --text-body: 1.0625rem;
  --text-small: 0.9rem;
  --text-mono-stat: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem);
  --text-eyebrow: 0.8rem;

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-widest: 0.14em;

  /* ---- Spacing-Skala ---- */
  --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: 5.5rem;
  --space-10: 7rem;
  --space-11: 9rem;
  --space-12: 11rem;

  /* ---- Layout ---- */
  --content-max-width: 1320px;
  --content-padding-inline: clamp(1.25rem, 3vw, 3.5rem);
  --nav-height: 84px;
  --nav-height-solid: 72px;

  /* Seitenweiter Versatz vom Viewport-Rand — abgeleitet aus der Hero-
     Textspalte, NICHT aus --content-max-width: der Hero-Text sitzt mittig
     zwischen dem linken Rand und dem Bild (hero__split-Verhältnis 72:100),
     und .container übernimmt exakt denselben Versatz, damit der Rest der
     Seite immer auf derselben Breite wie der Hero-Text sitzt.
     72:172 = 0.72fr von grid-template-columns: minmax(340px,0.72fr) 1fr
     (0.72 + 1 = 1.72 ⇒ als Ganzzahlbruch 72/172). */
  --hero-left-width: max(340px, calc(100vw * 72 / 172));
  --hero-text-width: min(480px, var(--hero-left-width));
  --container-inset: max(
    var(--content-padding-inline),
    calc((var(--hero-left-width) - var(--hero-text-width)) / 2)
  );

  /* ---- Radius / Rahmen ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border-width: 1px;

  /* ---- Schatten ---- */
  --shadow-card: 0 1px 2px rgba(22, 22, 26, 0.03), 0 10px 28px -18px rgba(22, 22, 26, 0.14);
  --shadow-float: 0 18px 48px -20px rgba(22, 22, 26, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;
}

/* Bewegung global abschalten, wenn der Besucher reduzierte Bewegung
   bevorzugt — jede Komponente, die diese Tokens referenziert, wird
   automatisch ruhig, ohne dass jede einzelne transition gejagt werden muss. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}