/* ═══════════════════════════════════════════════════════════
   TOKENS — Design Tokens & Theme System
   GeniusHub v21 — Redesign

   Default: Dark + Amber
   Varianten:
   - .white-mode            → Hell
   - .alternativ-mode       → iOS-Clean (legacy)
   - .accent-indigo         → Indigo statt Amber
   - .accent-sage           → Sage statt Amber
   ═══════════════════════════════════════════════════════════ */

/* ── Default: Dark + Amber ── */
:root {
  /* Neue Token-Struktur (redesign) */
  --bg-0:      #0b0c0e;   /* App-Hintergrund */
  --bg-1:      #141518;   /* Cards, Panels */
  --bg-2:      #1c1e22;   /* hover, raised */
  --bg-3:      #26282d;   /* tiefer */

  --fg:        #ececec;
  --fg-muted:  rgba(236,236,236,.62);
  --fg-dim:    rgba(236,236,236,.38);

  --line:      rgba(236,236,236,.08);
  --line-2:    rgba(236,236,236,.14);

  /* Amber (Default-Akzent) */
  --accent:       #e9a23b;
  --accent-2:     #f5b252;
  --accent-weak:  rgba(233,162,59,.14);
  --accent-ring:  rgba(233,162,59,.28);

  --ok:        #68b67a;
  --warn:      #e9a23b;
  --err:       #d06060;

  /* Typografie */
  --f-sans: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --f-serif: 'Playfair Display', serif;

  /* Radien */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Schatten (ruhig) */
  --shadow-1: 0 1px 2px rgba(0,0,0,.2);
  --shadow-2: 0 6px 20px rgba(0,0,0,.28);

  /* Motion */
  --dur-1: .15s;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Safe areas */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* ═══ Legacy-Aliase ═══
     Damit alter Code (workstation.css, organiser.css, blocks.css, JS)
     nicht crasht. Nach und nach migrieren. */
  --bg:            var(--bg-0);
  --panel:         var(--bg-1);
  --surface:       var(--bg-1);
  --card:          var(--bg-1);
  --card2:         var(--bg-2);
  --stroke:        var(--line);
  --s2:            var(--line-2);
  --txt:           var(--fg);
  --muted:         var(--fg-muted);
  --dim:           var(--fg-dim);
  --ac:            var(--accent);
  --ac2:           var(--accent-2);
  --green:         var(--ok);
  --red:           var(--err);
  --gold:          var(--accent);
  --purple:        #a07af0;
  --orange:        #e9a23b;
  --cyan:          #40d8e8;
  --g1:            linear-gradient(135deg, var(--accent), var(--accent-2));
  --g3:            linear-gradient(135deg, var(--accent), var(--accent-2));
  --r:             var(--r-lg);
  --r2:            var(--r-xl);
  --r3:            20px;
  --glass:         var(--bg-1);
  --glass-border:  var(--line);
  --glass-blur:    0px;  /* Glassmorphism raus */
  --f:             var(--f-sans);
  --m:             var(--f-mono);
  --s:             var(--f-sans); /* Playfair out → einheitlich Inter */
  --hover:         var(--bg-2);
}

/* ── Akzent-Varianten ── */
html.accent-indigo {
  --accent:       #7c83ff;
  --accent-2:     #9aa0ff;
  --accent-weak:  rgba(124,131,255,.16);
  --accent-ring:  rgba(124,131,255,.32);
  --ac:           var(--accent);
  --ac2:          var(--accent-2);
  --g1:           linear-gradient(135deg, var(--accent), var(--accent-2));
}

html.accent-sage {
  --accent:       #7aa987;
  --accent-2:     #95c0a0;
  --accent-weak:  rgba(122,169,135,.16);
  --accent-ring:  rgba(122,169,135,.32);
  --ac:           var(--accent);
  --ac2:          var(--accent-2);
  --g1:           linear-gradient(135deg, var(--accent), var(--accent-2));
}


/* ═══════════════════════════════════════════════════════════
   WHITE MODE — Hell
   ═══════════════════════════════════════════════════════════ */
html.white-mode {
  --bg-0:      #f7f6f3;
  --bg-1:      #ffffff;
  --bg-2:      #f0eee9;
  --bg-3:      #e6e3dc;

  --fg:        #1a1a1c;
  --fg-muted:  rgba(26,26,28,.62);
  --fg-dim:    rgba(26,26,28,.38);

  --line:      rgba(26,26,28,.09);
  --line-2:    rgba(26,26,28,.16);

  --shadow-1:  0 1px 2px rgba(0,0,0,.06);
  --shadow-2:  0 6px 20px rgba(0,0,0,.08);

  --bg:            var(--bg-0);
  --panel:         var(--bg-1);
  --surface:       var(--bg-1);
  --card:          var(--bg-1);
  --card2:         var(--bg-2);
  --stroke:        var(--line);
  --s2:            var(--line-2);
  --txt:           var(--fg);
  --muted:         var(--fg-muted);
  --dim:           var(--fg-dim);
  --glass:         var(--bg-1);
  --glass-border:  var(--line);
  --hover:         var(--bg-2);
}

html.white-mode body { background: var(--bg-0); color: var(--fg); }
html.white-mode ::selection { background: var(--accent-weak); color: var(--fg); }


/* ═══════════════════════════════════════════════════════════
   ALTERNATIV MODE — iOS-Clean (legacy, jetzt identisch zu default)
   ═══════════════════════════════════════════════════════════ */
html.alternativ-mode * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ═══════════════════════════════════════════════════════════
   SECRET: AMOLED Black
   ═══════════════════════════════════════════════════════════ */
html.secret-amoled {
  --bg-0: #000000;
  --bg-1: #0a0a0a;
  --bg-2: #141414;
  --bg-3: #1c1c1c;
  --line: rgba(255,255,255,.06);
  --line-2: rgba(255,255,255,.12);
  --bg: var(--bg-0);
  --panel: var(--bg-1);
  --surface: var(--bg-1);
  --card: var(--bg-1);
  --card2: var(--bg-2);
  --stroke: var(--line);
  --s2: var(--line-2);
  --glass: var(--bg-1);
  --glass-border: var(--line);
}

html.secret-amoled body { background: #000; }