/* ============================================================
   RULELESS MUSTERBUCH — Token-Ebene
   Alles leitet sich aus zwei Konstanten ab:
   φ  = 1.6180339887  (Typo-Skala, Proportion)
   Ψ  = 137.507°      (goldener Winkel, Farbrotation)
   ============================================================ */

:root {
  /* ---- Fibonacci-Raum (px, echte Folge) ---------------- */
  --f1: 1px;
  --f2: 2px;
  --f3: 3px;
  --f5: 5px;
  --f8: 8px;
  --f13: 13px;
  --f21: 21px;
  --f34: 34px;
  --f55: 55px;
  --f89: 89px;
  --f144: 144px;
  --f233: 233px;
  --f377: 377px;
  --f610: 610px;

  /* ---- φ-Typo-Skala ------------------------------------ */
  --phi: 1.6180339887;
  --t-micro: 0.618rem;
  --t-small: 0.786rem;
  --t-body: 1rem;
  --t-lead: 1.272rem;
  --t-h4: clamp(1.272rem, 1.1rem + 0.9vw, 1.618rem);
  --t-h3: clamp(1.618rem, 1.3rem + 1.6vw, 2.618rem);
  --t-h2: clamp(2.2rem, 1.4rem + 3.6vw, 4.236rem);
  --t-h1: clamp(3rem, 1rem + 9.2vw, 11.089rem);

  /* ---- Farbe: Basis (OKLCH, Tiefdruck-Schwarz) ---------
     Leicht warm unterlegt (Hue 60) statt neutral: reines Grau
     wirkt auf Bildschirmen klinisch, ein Hauch Wärme liest
     sich als Papier statt als Systemdialog.                  */
  --void:    oklch(12% 0.008 60);
  --abyss:   oklch(15% 0.010 60);
  --surface: oklch(19% 0.012 60);
  --raised:  oklch(24% 0.014 60);
  --line:    oklch(33% 0.014 60);
  --muted:   oklch(62% 0.014 60);
  --text:    oklch(94% 0.008 60);
  --white:   oklch(99% 0.003 60);

  /* ---- Akzente: dieselbe Ψ-Rotation, ab Messing (H=78) --
     Buntheit bewusst niedrig (0,10–0,13). Hohe Buntheit liest
     sich als Spielzeug; eine Agenturseite soll teuer wirken,
     nicht laut.                                              */
  --a0: oklch(78% 0.118 78);       /*  78.000  Messing       */
  --a1: oklch(64% 0.118 215.5);    /* +Ψ       Stahlblau     */
  --a2: oklch(72% 0.128 353);      /* +2Ψ      Rost          */
  --a3: oklch(80% 0.120 130.5);    /* +3Ψ      Moos          */
  --a4: oklch(66% 0.118 268);      /* +4Ψ      Tinte         */
  --a5: oklch(74% 0.126 45.5);     /* +5Ψ      Kupfer        */

  --glow-a0: oklch(78% 0.118 78 / 0.38);
  --glow-a1: oklch(74% 0.126 45.5 / 0.38);

  /* ---- Bewegung ---------------------------------------- */
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 680ms;
  --dur-5: 1100ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Struktur ---------------------------------------- */
  --gutter: clamp(var(--f21), 4vw, var(--f89));
  --measure: 62ch;
  --radius: var(--f13);
  --radius-lg: var(--f21);
  --border: 1px solid var(--line);

  /* ---- Schrift ----------------------------------------- */
  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "Berkeley Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

/* Heller Modus — Musterbuch bleibt dunkel, aber der Schalter existiert */
:root[data-theme="light"] {
  --void:    oklch(97% 0.006 265);
  --abyss:   oklch(94% 0.008 265);
  --surface: oklch(90% 0.010 265);
  --raised:  oklch(86% 0.012 265);
  --line:    oklch(76% 0.014 265);
  --muted:   oklch(48% 0.020 265);
  --text:    oklch(20% 0.020 265);
  --white:   oklch(10% 0.010 265);
  --a0: oklch(58% 0.155 195);
  --a1: oklch(54% 0.215 332.5);
  --a2: oklch(62% 0.185 110);
  --a3: oklch(50% 0.190 247.5);
  --a4: oklch(58% 0.175 25);
  --a5: oklch(60% 0.160 162.5);
}

/* ---- Selbst gehostete variable Schrift (kein CDN, kein Tracking) ---- */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Filmkorn als SVG-Datenquelle (kein Bild, kein Request) -------- */
:root {
  --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}