/* ============================================================================
   Oliver Wiemers — Brand Tokens. Single Source of Truth für persönliche
   Web-Tools, Landingpages, Slides & Video.
   Quelle: CI.md (Stand 22.06.2026). Visuelle Referenz: brandboard.html.

   Prinzip (CI.md §0): maximale Reduktion, maximaler Kontrast. Monochrom S/W,
   keine Akzentfarbe. Zwei Register, dieselbe DNA:
     • Editorial (Senra) — reines #000/#FFF, Display-Caps + Kursiv-Serife.
     • System (shadcn)   — Neutralskala, Inter, Hairlines, Weißraum.

   Nutzung in einem Projekt (self-contained, KEIN CDN):
     1. Fonts lokal nach vendor/ spiegeln (Anton, Playfair Display Italic,
        Inter, JetBrains Mono) + eigene fonts.css mit @font-face.
     2. <link rel="stylesheet" href="vendor/fonts.css">
        <link rel="stylesheet" href="brand-tokens.css">
     3. Überall var(--ow-*) statt Hardcode-Hexwerte/Fonts verwenden.
   ============================================================================ */

:root {
  /* — Kern (Editorial-Register: NUR diese beiden, kein Grau) — */
  --ow-black:      #000000;   /* Hintergründe, Wordmark, alle Hero-Flächen */
  --ow-white:      #FFFFFF;   /* Text auf Schwarz, helle Flächen */

  /* — Neutralskala (System/UI — shadcn „neutral", nur für Produkt-Oberflächen) — */
  --ow-neutral-50:  #FAFAFA;
  --ow-neutral-100: #F5F5F5;
  --ow-neutral-200: #E5E5E5;  /* Hairlines hell */
  --ow-neutral-300: #D4D4D4;
  --ow-neutral-400: #A3A3A3;
  --ow-neutral-500: #737373;  /* Sekundärtext */
  --ow-neutral-600: #525252;
  --ow-neutral-700: #404040;
  --ow-neutral-800: #262626;  /* Hairlines dunkel */
  --ow-neutral-900: #171717;
  --ow-neutral-950: #0A0A0A;

  /* — Akzentfarbe: KEINE. Interaktion über Kontrast/Gewicht/Invertierung. — */

  /* — Typografie (frei, Google Fonts; lokal spiegeln) — */
  --ow-font-display: 'Anton', 'Druk Wide', system-ui, sans-serif;       /* Wordmark, Hero-Caps. IMMER Caps, eng. */
  --ow-font-serif:   'Playfair Display', 'Canela', Georgia, serif;       /* Zitate/Signatur, kursiv & sparsam. */
  --ow-font-system:  'Inter', 'Geist Sans', system-ui, -apple-system, Arial, sans-serif; /* Body, UI, Captions. */
  --ow-font-mono:    'JetBrains Mono', 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace; /* Zahlen, Eyebrows, Code. */

  --ow-weight-regular: 400;
  --ow-weight-bold:    700;
  --ow-tracking-eyebrow: 0.15em;   /* Eyebrow-Labels: tracked caps */
  --ow-leading-body:   1.55;
  --ow-leading-display: 1.0;       /* enge Zeilenhöhe, Zeilen berühren sich fast */

  /* — Layout (shadcn-Disziplin) — */
  --ow-radius:     0.5rem;   /* ruhig in der UI */
  --ow-radius-editorial: 0;  /* harte Kanten im Editorial-Register (Founders-Cover) */
  --ow-hairline-light: 1px solid var(--ow-neutral-200);
  --ow-hairline-dark:  1px solid var(--ow-neutral-800);
  --ow-maxwidth:   1100px;
}

/* Optionale Basis-Defaults — bei Bedarf einbinden, sonst nur die Tokens nutzen. */
body.ow-base {
  font-family: var(--ow-font-system);
  color: var(--ow-black);
  background: var(--ow-white);
  line-height: var(--ow-leading-body);
}
body.ow-base h1, body.ow-base h2 {
  font-family: var(--ow-font-display);
  font-weight: var(--ow-weight-bold);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: var(--ow-leading-display);
  color: var(--ow-black);
}
/* Eyebrow-Label: tracked caps, klein, Mono oder System-Sans (Senra-Playbook). */
.ow-eyebrow {
  font-family: var(--ow-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--ow-tracking-eyebrow);
  font-size: 0.75rem;
  color: var(--ow-neutral-500);
}
/* Akzent-/Signatur-Wort: kursive Serife, sparsam. */
.ow-serif { font-family: var(--ow-font-serif); font-style: italic; }
body.ow-base a { color: var(--ow-black); text-decoration: underline; } /* kein Farb-Link */