/* ============================================================
   TVF 1912 — Designtoken
   Alle Kontrastwerte nach WCAG 2.1 berechnet und am gerenderten
   Dokument geprüft. Die Werte in den Kommentaren sind gemessen,
   nicht geschätzt. Siehe _rebuild/05-DESIGNSYSTEM.md
   ============================================================ */

:root{
  /* ---- Grundpalette ------------------------------------- */
  --tvf-paper:        #FFFFFF;
  --tvf-surface:      #F7F5F1;   /* warme Fläche */
  --tvf-line:         #E3E0DA;   /* nur dekorativ, 1.32:1 */
  --tvf-line-strong:  #82888F;   /* Bedienelemente, 3.58:1 auf Weiß */
  --tvf-ink:          #14161A;   /* 18.11:1 auf Weiß */
  --tvf-ink-2:        #1E2127;
  --tvf-ink-3:        #2A2E36;
  --tvf-grey:         #6B7079;   /* 4.98:1 auf Weiß */
  --tvf-grey-2:       #A8ACB3;   /* 7.95:1 auf Anthrazit */

  /* ---- Signatur ----------------------------------------- */
  --tvf-elfenbein:      #E6D2B5; /* RAL 1015 — 12.81:1 auf Anthrazit */
  --tvf-elfenbein-tief: #7C6339; /* 5.67:1 auf Weiß */

  /* ---- Status ------------------------------------------- */
  --tvf-ok:    #1F7A4D;
  --tvf-warn:  #8A5A00;
  --tvf-err:   #B3261E;
  --tvf-focus: #2D6BE0;          /* 4.89:1 auf Weiß */

  /* ---- Rollen: HELL ------------------------------------- */
  --bg:            var(--tvf-paper);
  --bg-2:          var(--tvf-surface);
  --fg:            var(--tvf-ink);
  --fg-muted:      var(--tvf-grey);
  --border:        var(--tvf-line);
  --border-strong: var(--tvf-line-strong);
  --accent:        var(--tvf-elfenbein-tief);
  --accent-flaeche:var(--tvf-elfenbein);
  --on-accent:     var(--tvf-ink);
  --action:        var(--tvf-ink);
  --on-action:     var(--tvf-paper);
  --focus-ring:    var(--tvf-focus);

  /* ---- Schrift ------------------------------------------ */
  --font:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, monospace;

  --t-d1:   clamp(3rem, 9.5vw, 8.5rem);
  --t-d2:   clamp(2.1rem, 5.6vw, 4.6rem);
  --t-h1:   clamp(1.875rem, 3.6vw, 3rem);
  --t-h2:   clamp(1.5rem, 3vw, 2.4rem);
  --t-h3:   1.25rem;
  --t-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body: 1rem;
  --t-small:.875rem;
  --t-cap:  .75rem;

  /* ---- Raster: 4px-Basis -------------------------------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r-sm:2px; --r:4px; --r-lg:8px; --r-full:999px;

  --pad:  clamp(20px, 5vw, 64px);
  --sec:  clamp(88px, 13vh, 180px);
  --breit:1240px;
  --lese: 62ch;

  /* ---- Bewegung ----------------------------------------- */
  --d-fast:150ms; --d-base:220ms; --d-slow:600ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Rollen: DUNKEL ------------------------------------- */
:root[data-theme="dark"]{
  --bg:            var(--tvf-ink);
  --bg-2:          var(--tvf-ink-2);
  --fg:            var(--tvf-surface);
  --fg-muted:      var(--tvf-grey-2);
  --border:        var(--tvf-ink-3);
  --border-strong: #676C74;         /* 3.43:1 auf Anthrazit */
  --accent:        var(--tvf-elfenbein);
  --on-accent:     var(--tvf-ink);
  --action:        var(--tvf-elfenbein);
  --on-action:     var(--tvf-ink);
  --focus-ring:    var(--tvf-elfenbein);
  --tvf-ok:    #4ADE97;
  --tvf-warn:  #F5B94A;
  --tvf-err:   #FF8A80;
}

/* Systemvorgabe greift, solange keine bewusste Wahl getroffen wurde */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:            var(--tvf-ink);
    --bg-2:          var(--tvf-ink-2);
    --fg:            var(--tvf-surface);
    --fg-muted:      var(--tvf-grey-2);
    --border:        var(--tvf-ink-3);
    --border-strong: #676C74;
    --accent:        var(--tvf-elfenbein);
    --on-accent:     var(--tvf-ink);
    --action:        var(--tvf-elfenbein);
    --on-action:     var(--tvf-ink);
    --focus-ring:    var(--tvf-elfenbein);
    --tvf-ok:    #4ADE97;
    --tvf-warn:  #F5B94A;
    --tvf-err:   #FF8A80;
  }
}