/* ============================================================
   thereelthing.studio — Design Tokens
   Stand 02.07.2026 · Quelle: 16_Brand_Guide.md (gelockt ENT-13/14/47/54)
   Abnehmer: Website-Build-Session (21_Website_Briefing.md)
   Enthält die Audit-Fixes F1 (Creme-Ink) + F2 (Coral-Kontrast).
   ============================================================ */

:root {
  /* ---- Farbe (04 §1 / 16 §3, gelockt) ---- */
  --trt-creme:    #F1E8D7;  /* Basis-Grund: Web, Editorial, Angebote, Print */
  --trt-charcoal: #1A1712;  /* Bildbühne „Licht aus" + Body-Ink auf Creme */
  --trt-kobalt:   #2A46FF;  /* Lauter Grund + Highlight-Wort auf Creme */
  --trt-coral:    #FF3A5E;  /* Neon-Signal: Punkt, Bar, Index, Avatar — nie Fläche */
  --trt-ink-on-coral: #191014; /* Text auf Coral-Bar/Button (5,4:1) */

  /* ---- Semantische Farb-Rollen (Audit F1/F2, WCAG AA geprüft) ---- */
  --trt-bg:            var(--trt-creme);
  --trt-text:          var(--trt-charcoal);   /* F1: Body-Ink auf Creme = 14,7:1 */
  --trt-text-dim:      rgba(26, 23, 18, .68);   /* F1-Fix: ~4,9:1 auf Creme (WCAG AA) */
  --trt-text-faint:    rgba(26, 23, 18, .40);   /* nur dekorativ, nie Fließtext */
  --trt-line:          rgba(26, 23, 18, .15);
  --trt-bg-invert:     var(--trt-charcoal);   /* „Licht aus" Bildbühne */
  --trt-text-invert:   var(--trt-creme);      /* Creme auf Charcoal = 14,7:1 */
  --trt-text-invert-dim: rgba(241, 232, 215, .60);
  --trt-line-invert:   rgba(241, 232, 215, .16);
  --trt-signal:        var(--trt-coral);       /* nur nicht-textliches Signal auf Creme */
  /* F2-REGEL: Highlight-WORT auf Creme = Kobalt (Coral wäre 2,9:1 = Fail).
     Auf Charcoal/Kobalt ist Coral als Wort erlaubt (5,1:1). */
  --trt-highlight-on-light: var(--trt-kobalt);
  --trt-highlight-on-dark:  var(--trt-coral);

  /* ---- Typografie (16 §4, ENT-47 Re-Check bestanden = Schibsted) ---- */
  --trt-font-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --trt-font-body:    'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --trt-font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --trt-font-wordmark: /* condensed Logo-Wortmarke = Bild-Asset, kein Web-Font */ ;

  /* Gewichte */
  --trt-w-display: 900;
  --trt-w-head:    800;
  --trt-w-sub:     500;
  --trt-w-body:    400;

  /* Type-Skala (fluid, ~1.25–1.33) */
  --trt-fs-display: clamp(56px, 12vw, 168px); /* Hero: „Foto. Film. Drohne." */
  --trt-fs-h1:      clamp(40px, 7vw, 96px);
  --trt-fs-h2:      clamp(30px, 4.6vw, 58px);
  --trt-fs-h3:      24px;
  --trt-fs-sub:     clamp(19px, 2.5vw, 32px);  /* Claim */
  --trt-fs-body:    17px;
  --trt-fs-small:   14px;
  --trt-fs-meta:    12px;                       /* Mono-Index/Captions */

  /* Tracking (Display immer tight) */
  --trt-ls-display: -.05em;
  --trt-ls-h2:      -.035em;
  --trt-ls-sub:     -.01em;
  --trt-ls-meta:    .05em;   /* Mono, leicht offen */
  --trt-lh-display: .86;
  --trt-lh-body:    1.5;

  /* ---- Spacing (8px-Basis) ---- */
  --trt-space-1: 4px;
  --trt-space-2: 8px;
  --trt-space-3: 12px;
  --trt-space-4: 16px;
  --trt-space-5: 20px;
  --trt-space-6: 24px;
  --trt-space-8: 32px;
  --trt-space-10: 40px;   /* Standard-Gutter / Seitenrand */
  --trt-space-12: 48px;
  --trt-space-16: 64px;
  --trt-space-24: 96px;   /* Sektions-Padding vertikal */

  /* ---- Layout ---- */
  --trt-maxw: 1180px;
  --trt-grid-cols: 12;
  --trt-radius-pill: 22px; /* Coral-Button/Bar */

  /* ---- Motion (wenige, präzise Momente — 21 §3) ---- */
  --trt-ease: cubic-bezier(.2, .6, .2, 1);
  --trt-dur-reveal: 1s;
  --trt-dur-lichtaus: 1.4s; /* Grade-/Licht-aus-Übergang */
}

/* ---- Basis-Rollen als Utility (optional) ---- */
/* body { background: var(--trt-bg); color: var(--trt-text); font-family: var(--trt-font-body); } */

/* HINWEIS Website-Session:
   - Fonts lokal hosten (AVIF/WOFF2), nicht per CDN — Performance (LCP < 2,5 s, 21 §3).
   - Schibsted Grotesk (OFL) + Space Mono (OFL): Self-Hosting lizenzkonform.
   - Highlight-Wort NIE Coral auf Creme (F2). Index-Marker „No. 0XX" nur bei realem Release (ENT-54).
   - Naming in allen Text-/Such-Flächen (title/meta/alt): „thereelthing.studio" (F6). */