/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — Design-Tokens „Dark Luxury"
   Dark ist Default; Light Mode = elegante Creme-Variante via [data-theme="light"]
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marke ── */
  --gold:        #C9A45C;
  --gold-bright: #E3C378;
  --gold-deep:   #A8843F;
  --gold-alpha-08: rgba(201, 164, 92, .08);
  --gold-alpha-15: rgba(201, 164, 92, .15);
  --gold-alpha-25: rgba(201, 164, 92, .25);
  --gold-alpha-40: rgba(201, 164, 92, .40);

  /* ── Flächen (Dark Default) ── */
  --bg:          #0B0F0C;
  --bg-elev:     #10150F;
  --surface:     #121A14;
  --surface-2:   #18231B;
  --surface-3:   #1F2D22;
  --border:      rgba(201, 164, 92, .14);
  --border-strong: rgba(201, 164, 92, .30);

  /* ── Text ── */
  --text:        #EDE8DC;
  --text-dim:    #A8A69B;
  --text-faint:  #6E7268;
  --text-on-gold:#1A1408;

  /* ── Semantik ── */
  --green:       #6FBF8B;
  --green-dim:   rgba(111, 191, 139, .14);
  --amber:       #D9A648;
  --amber-dim:   rgba(217, 166, 72, .14);
  --red:         #D97362;
  --red-dim:     rgba(217, 115, 98, .14);
  --blue:        #7BA8C9;
  --blue-dim:    rgba(123, 168, 201, .14);

  /* ── Typografie ── */
  --font-ui:     'DM Sans', system-ui, sans-serif;
  --font-display:'DM Serif Display', Georgia, serif;
  --font-mono:   'DM Mono', ui-monospace, monospace;

  /* ── Geometrie ── */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── Schatten / Glow ── */
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
  --shadow-modal:0 24px 64px rgba(0,0,0,.55);
  --glow-gold:   0 0 0 1px var(--gold-alpha-25), 0 0 18px rgba(201,164,92,.18);

  /* ── Layout ── */
  --topbar-h:    56px;
  --bottombar-h: 62px;
  --sidebar-w:   248px;
  --page-pad:    16px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ── Motion ── */
  --t-fast:      150ms cubic-bezier(.4,0,.2,1);
  --t-med:       200ms cubic-bezier(.4,0,.2,1);

  color-scheme: dark;
}

/* ── Light Mode: warme Creme-Variante ── */
:root[data-theme="light"] {
  --bg:          #F7F3EB;
  --bg-elev:     #F1EBDF;
  --surface:     #FFFDF8;
  --surface-2:   #F4EEE2;
  --surface-3:   #ECE3D2;
  --border:      rgba(138, 108, 50, .18);
  --border-strong: rgba(138, 108, 50, .38);

  --text:        #22301F;
  --text-dim:    #5C6355;
  --text-faint:  #969B8D;
  --text-on-gold:#1A1408;

  --gold:        #A8843F;
  --gold-bright: #C9A45C;
  --gold-deep:   #8A6C32;
  --gold-alpha-08: rgba(168, 132, 63, .08);
  --gold-alpha-15: rgba(168, 132, 63, .15);
  --gold-alpha-25: rgba(168, 132, 63, .25);
  --gold-alpha-40: rgba(168, 132, 63, .40);

  --green:       #3E8A5C;
  --green-dim:   rgba(62, 138, 92, .12);
  --amber:       #A97B1E;
  --amber-dim:   rgba(169, 123, 30, .12);
  --red:         #B84A38;
  --red-dim:     rgba(184, 74, 56, .10);
  --blue:        #3E6E96;
  --blue-dim:    rgba(62, 110, 150, .10);

  --shadow-card: 0 1px 2px rgba(60,48,20,.06), 0 8px 24px rgba(60,48,20,.07);
  --shadow-modal:0 24px 64px rgba(60,48,20,.22);
  --glow-gold:   0 0 0 1px var(--gold-alpha-25), 0 0 14px rgba(168,132,63,.14);

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --page-pad: 28px; }
}