/* Headwind Arts – Design-Tokens (Relaunch 2026)
   Zwei Richtungen über [data-theme]: "nacht" (Fast-Schwarz, Lila als Licht) und "tag" (Papier, Tinte, Lila als Akzent).
   Kontraste gegen --bg geprüft (WCAG 2.2 AA); Werte in Klammern.
   Markenlila #7f6de7 → #9b8dee nur groß/dekorativ oder als Licht in 3D – nie als kleiner Text. */

:root,
[data-theme="nacht"] {
  color-scheme: dark;
  --bg:            #0a0a0b;
  --surface-1:     #151517;
  --surface-2:     #1d1d20;
  --text:          #edebe6;                 /* 16.6:1 */
  --text-muted:    #a3a19c;                 /* 7.7:1 */
  --accent:        #aa9cf7;                 /* 8.3:1 – Links, Fokus, Highlights */
  --accent-strong: #c4b9fa;
  --on-accent:     #0a0a0b;                 /* 8.3:1 auf --accent */
  --hairline:      rgb(255 255 255 / .12);
  --hairline-strong: rgb(255 255 255 / .42); /* Input-Rahmen ≥ 3:1 */
  --grain-opacity: .035;
  --vignette:      radial-gradient(120% 90% at 50% 40%, transparent 55%, rgb(0 0 0 / .34) 100%);
  --light-3d:      #9b8dee;                 /* Rim-/Bloom-Licht im 3D */
  --shadow-3d:     rgb(0 0 0 / .55);
}

[data-theme="tag"] {
  color-scheme: light;
  --bg:            #f2efe9;                 /* Papier, nie reines Weiß */
  --surface-1:     #e9e5dd;
  --surface-2:     #ded9cf;
  --text:          #121214;                 /* 16.3:1 */
  --text-muted:    #5c5a55;                 /* 6.0:1 */
  --accent:        #5e5197;                 /* 5.9:1 */
  --accent-strong: #4a3f7d;
  --on-accent:     #ffffff;                 /* 6.8:1 auf --accent */
  --hairline:      rgb(18 18 20 / .12);
  --hairline-strong: rgb(18 18 20 / .55);
  --grain-opacity: .025;
  --vignette:      none;
  --light-3d:      #7f6de7;                 /* Lila nur als Schatten-Tint / Kantenlicht */
  --shadow-3d:     rgb(60 50 110 / .22);
}

:root {
  /* Marke */
  --brand-lilac-1: #7f6de7;
  --brand-lilac-2: #9b8dee;

  /* Typo: Archivo (Grotesk, Breitenachse 62–125 %), Instrument Serif Italic (1 Akzentwort), JetBrains Mono (Metadaten)
     Je Webschrift folgt eine metrisch angeglichene Ersatzschrift (fonts.css) – kein Layout-Sprung beim Schriftwechsel. */
  --font-sans:    "Archivo", "Archivo Fallback", "Archivo Fallback Zeichen", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-serif:   "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", "JetBrains Mono Fallback", "JetBrains Mono Fallback Courier", ui-monospace, Consolas, monospace;
  --display-stretch: 118%;          /* breite Display-Schnitte im Geist des Logos */
  --display-weight:  620;
  /* „ch“ der Webschrift als em (Breite der Ziffer 0 in Archivo). Die Einheit ch folgt während des Ladens der
     Ersatzschrift, deren 0 im Verhältnis schmaler ist (bis 10 %) – Satzbreiten in Archivo-Text darum hiermit statt in ch. */
  --ch-text:    .573em;             /* Archivo 400, wdth 100 (Fließtext, Leads) */
  --ch-display: .709em;             /* Archivo 620, wdth 118 (h1–h3) */
  --ch-hero:    .723em;             /* Archivo 620, wdth 120 (.pg-hero h1) */

  --fs-h1:    clamp(2rem, 0.5rem + 6.5vw, 5.2rem);   /* 320 px ≈ 32 px; Minimum gesenkt wegen deutscher Komposita */
  --lh-h1:    .94;
  --fs-h2:    clamp(1.75rem, 1rem + 3.2vw, 3.4rem);
  --fs-h3:    clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --fs-lead:  clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body:  1.0625rem;                            /* 17 px */
  --lh-body:  1.6;
  --fs-label: .75rem;                               /* Mono 12 px, Versalien */
  --tracking-display: -.04em;                       /* ab 64 px */
  --tracking-h2:      -.02em;
  --tracking-label:   .08em;
  --measure: 62ch;

  /* Raum (fluid 360 → 1280 px) */
  --space-2xs: clamp(.5rem, .48rem + .1vw, .5625rem);
  --space-xs:  clamp(.75rem, .7rem + .22vw, .875rem);
  --space-s:   clamp(1rem, .95rem + .22vw, 1.125rem);
  --space-m:   clamp(1.5rem, 1.43rem + .33vw, 1.6875rem);
  --space-l:   clamp(2rem, 1.9rem + .43vw, 2.25rem);
  --space-xl:  clamp(3rem, 2.85rem + .65vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8rem + .87vw, 4.5rem);
  --section-space: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --section-space-sm: 2.75rem;      /* Handy: Abstand zwischen Abschnitten (≈ 88 px Fuge statt 144–180) */
  --container: 80rem;
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); /* Notch/Dynamic Island quer (viewport-fit=cover); sonst 0 */
  --header-h: 4.25rem;

  /* Form: Haarlinien statt Schatten */
  --radius-card: 24px;
  --radius-s: 10px;
  --radius-pill: 999px;

  /* Bewegung: eine Kurve, kein Overshoot */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);
  --dur-fast:    160ms;
  --dur-enter:   750ms;
  --dur-exit:    450ms;
  --enter-y:     16px;
  --stagger:     60ms;
  --tilt-max:    6deg;
  --focus-ring:  3px solid var(--accent);

  --z-header: 200; --z-overlay: 900;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-enter: 150ms; --dur-exit: 1ms; --enter-y: 0px; --stagger: 0ms; --tilt-max: 0deg; }
}

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body) / var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
p, li { max-width: var(--measure); text-wrap: pretty; }
p { margin: 0 0 var(--space-s); hyphens: auto; }
em.accent, .serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: 0; }
.label { font: 500 var(--fs-label) / 1.4 var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
img, svg, video, canvas { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--on-accent); }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Statisches Grain (nie animiert) */
.grain::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-overlay);
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}