/* ==========================================================================
   tokens.css — Design-Grundlagen: Farbe, Typografie, Raster, Bewegung
   Alle Werte zentral. Wer das Erscheinungsbild ändern will, ändert es hier.
   ========================================================================== */

/* --- Schriften ------------------------------------------------------------
   Lokal eingebunden (DSGVO: keine Requests an Google Fonts o. ä.).
   Fehlen die Dateien in assets/fonts/, greifen die System-Fallbacks —
   die Seite bleibt in jedem Fall lesbar.                                    */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Schriftfamilien --- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-text: var(--font-display);

  /* --- Typografische Skala (fluid) ---
     Der Sprung zwischen --step-6 und --step-0 trägt den gestalterischen
     Ausdruck. Bewusst großer Kontrast, ruhige Schriften.                    */
  --step--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
  --step-0:  clamp(1rem, 0.94rem + 0.29vw, 1.19rem);
  --step-1:  clamp(1.2rem, 1.11rem + 0.44vw, 1.48rem);
  --step-2:  clamp(1.44rem, 1.3rem + 0.66vw, 1.86rem);
  --step-3:  clamp(1.73rem, 1.53rem + 0.97vw, 2.32rem);
  --step-4:  clamp(2.07rem, 1.79rem + 1.4vw, 2.9rem);
  --step-5:  clamp(2.49rem, 2.09rem + 2vw, 3.62rem);
  --step-6:  clamp(2.99rem, 2.42rem + 2.83vw, 4.53rem);
  --step-7:  clamp(3.58rem, 2.8rem + 3.94vw, 5.66rem);

  /* --- Laufweite & Zeilenabstand --- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;
  --leading-tight: 1.06;
  --leading-snug: 1.25;
  --leading-normal: 1.58;

  /* --- Abstände (auf 4px-Raster) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --space-4xl: 14rem;

  /* --- Maße --- */
  --measure: 62ch;          /* Lesbare Zeilenlänge für Fließtext */
  --page-max: 1680px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* --- Farben: Lichtmodus ---
     Kein Akzentton. Farbe kommt ausschließlich aus den Arbeiten.            */
  --c-bg: #ffffff;
  --c-bg-sunken: #f6f6f5;
  --c-ink: #141414;
  --c-ink-muted: #52524f;
  --c-ink-faint: #6b6b68;
  --c-rule: #e2e2df;
  --c-rule-strong: #141414;
  --c-focus: #141414;
  --c-todo-bg: #fff6d6;
  --c-todo-ink: #6b5200;

  /* --- Bewegung --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  color-scheme: light dark;
}

/* --- Farben: Dunkelmodus ---
   Nicht reines Schwarz — die Arbeiten enthalten tiefe Schwarzwerte, die
   sonst am Seitenhintergrund kleben.                                        */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0d0d0d;
    --c-bg-sunken: #161615;
    --c-ink: #e8e8e6;
    --c-ink-muted: #b0b0ab;
    --c-ink-faint: #9a9a95;
    --c-rule: #2a2a28;
    --c-rule-strong: #e8e8e6;
    --c-focus: #e8e8e6;
    --c-todo-bg: #33290a;
    --c-todo-ink: #e8cf7a;
  }
}

:root[data-theme="dark"] {
  --c-bg: #0d0d0d;
  --c-bg-sunken: #161615;
  --c-ink: #e8e8e6;
  --c-ink-muted: #b0b0ab;
  --c-ink-faint: #9a9a95;
  --c-rule: #2a2a28;
  --c-rule-strong: #e8e8e6;
  --c-focus: #e8e8e6;
  --c-todo-bg: #33290a;
  --c-todo-ink: #e8cf7a;
}