/* GENERIERT — NICHT HAND-EDITIEREN (UC-1568).
   Quelle: social24/social24/api/static/app.html (v3-Token-Layer, UC-1567).
   Regenerieren: scripts/sync-v3-tokens.py
   Drift-Test:   social24/tests/test_uc1568_upload_surface.py
*/

:root {
  color-scheme: dark;
  /* ── UC-1567 Content Studio v3 — Superhuman-Methode: gestufte, leicht kuehl
     getoente Graufolge. NIE #000/#fff. EIN Bernstein-Akzent. Quelle:
     design-planner-2026-07-v3/hero.html Z.17-110 (visuelle SoT). ── */
  --bg-0: #0b0c0f;      /* App-Rahmen, tiefste Ebene */
  --bg-1: #101217;      /* Haupt-Surface (Liste) */
  --bg-2: #14161c;      /* Panel / Preview-Surface */
  --bg-3: #1a1d25;      /* erhoeht: selektierte Zeile, Karten */
  --bg-4: #22262f;      /* Hover / hoehere Ebene */
  --bg-glass: rgba(26,29,37,.72);

  --line: rgba(255,255,255,.055);
  --line-2: rgba(255,255,255,.09);
  --line-3: rgba(255,255,255,.14);

  /* Text — Off-White, 4 Stufen */
  --tx-0: #eceef1;
  --tx-1: #a7adba;
  --tx-2: #727988;
  --tx-3: #565c6a;

  /* EIN Akzent — warmes Bernstein ("vertieft" fuer Dark) */
  --cs-accent: #e0a24a;
  --accent-hi: #f0b968;
  --accent-dim: rgba(224,162,74,.14);
  --accent-line: rgba(224,162,74,.34);
  --accent-ink: #1c1406;

  /* Kanal-Farben — nur als 6px-Punkte, nie Flaeche */
  --ig: #e06a94;
  --li: #4f8fd6;
  --fb: #5673d6;
  --tt: #3fc0c9;
  --x: #9aa0ad;
  --yt: #d06a6a;

  /* Status */
  --ok: #5cb98a;      /* freigegeben / live */
  --wait: #e0a24a;    /* wartet */
  --plan: #6e8bd6;    /* geplant */
  --err: #d0697f;     /* Fehler (gedeckt, kein Alarm-Rot) */

  /* Wirkungs-Skala — neutral-warmgrau gestuft (Mix-Flaeche liest monochrom) */
  --w1: #cbb79a;
  --w2: #a99d86;
  --w3: #847d70;
  --w4: #61605c;
  --w5: #464a52;

  --shadow-panel:
     0 0 0 1px rgba(0,0,0,.4),
     0 1px 2px rgba(0,0,0,.4),
     0 8px 28px -8px rgba(0,0,0,.55);
  --shadow-device:
     0 1px 1px rgba(0,0,0,.5),
     0 12px 40px -12px rgba(0,0,0,.7),
     0 40px 80px -40px rgba(0,0,0,.6);

  /* ── Rollen-Aliasse (UC-1518-Token-INFRA bleibt): Bestands-Klassen + JS
     laufen unveraendert ueber diese Namen — nur die Werte sind jetzt v3. ── */
  --bg: var(--bg-0);
  --bg2: var(--bg-1);
  --surface: var(--bg-2);
  --surface2: var(--bg-3);
  --surface3: var(--bg-4);
  --border: var(--line);
  --border2: var(--line-2);
  --text: var(--tx-0);
  --text-dim: var(--tx-1);
  --text-mute: var(--tx-2);

  --brand: var(--cs-accent);   --brand-ink: var(--accent-ink);
  --accent: var(--cs-accent);  --accent-2: var(--accent-hi);
  --amber: var(--wait);        --amber-ink: var(--accent-ink);
  --green: var(--ok);          --green-ink: #0a2418;
  --red: var(--err);           --red-ink: #33121a;
  --linkedin: var(--li);

  --teal: var(--cs-accent);
  --teal-dim: var(--accent-dim);
  --amber-dim: var(--accent-dim);
  --green-dim: rgba(92,185,138,.14);
  --indigo: var(--plan);
  --indigo-dim: rgba(110,139,214,.14);
  --red-dim: rgba(208,105,127,.14);

  /* Radien / Schatten */
  --radius: 12px;
  --radius-sm: 9px;
  --shadow-1: var(--shadow-panel);
  --shadow-2: var(--shadow-device);

  /* Fonts (self-hosted, kein CDN). E1: Serif-Rolle des Mockups wird auf
     General Sans 700 mit engem Tracking abgebildet (--font-serif-Alias). */
  --font-display: 'General Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Switzer', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-0: #eceef1;
  --bg-1: #f6f7f9;
  --bg-2: #fbfbfc;
  --bg-3: #fefefe;
  --bg-4: #f0f1f4;
  --bg-glass: rgba(254,254,254,.78);

  --line: rgba(16,20,28,.08);
  --line-2: rgba(16,20,28,.12);
  --line-3: rgba(16,20,28,.16);

  --tx-0: #1a1d24;
  --tx-1: #565c68;
  --tx-2: #878d99;
  --tx-3: #a8adb8;

  --cs-accent: #b9772a;
  --accent-hi: #a5661d;
  --accent-dim: rgba(185,119,42,.10);
  --accent-line: rgba(185,119,42,.30);
  --accent-ink: #fdf9f2;

  --ig: #c8527f;
  --li: #2f6fbf;
  --fb: #3f5bc0;
  --tt: #1a9aa5;
  --x: #5b616e;
  --yt: #b8544f;

  --ok: #3f9d6d;
  --wait: #b9772a;
  --plan: #4f6fc0;
  --err: #c05468;

  --w1: #b79c72;
  --w2: #9c8a6e;
  --w3: #847c6b;
  --w4: #9298a2;
  --w5: #b3b8c1;

  --shadow-panel:
     0 0 0 1px rgba(16,20,28,.05),
     0 1px 2px rgba(16,20,28,.06),
     0 10px 30px -12px rgba(16,20,28,.14);
  --shadow-device:
     0 1px 1px rgba(16,20,28,.06),
     0 14px 44px -14px rgba(16,20,28,.20),
     0 40px 80px -50px rgba(16,20,28,.18);

  --green-dim: rgba(63,157,109,.12);
  --indigo-dim: rgba(79,111,192,.12);
  --red-dim: rgba(192,84,104,.12);
  --green-ink: #f0f8f4;
  --red-ink: #fdf2f4;
}