/* Theme tokens + component system (silbergrau + champagner-gold)

   Rule of thumb:
   - Components + views should prefer CSS variables (no hardcoded colors)
   - Light/Dark are ONLY token overrides (if you add a light theme later)
*/

:root{
  /* spacing scale */
  --s-1: 4px;
  --s-1_5: 6px;
  --s-2: 8px;
  --s-2_5: 10px;
  --s-3: 12px;
  --s-3_5: 14px;
  --s-4: 16px;
  --s-4_25: 18px;
  --s-5: 24px;
  --s-6: 32px;

  --s-0_5: 2px;
  --s-11: 44px;
  --s-12: 48px;
  --s-16: 64px;
  --s-7: 28px;
  /* radii */
  --r-xxs: 6px;
  --r-0: 10px;
  --r-1: 12px;
  --r-1_5: 14px;
  --r-1_75: 16px;
  --r-2: 18px;
  --r-2_5: 20px;
  --r-3: 22px;
  --r-pill: 999px;

  /* typography */
  --fs-1: .75rem;
  --fs-2: .85rem;
  --fs-3: .95rem;
  --fs-4: 1.05rem;
  --fs-5: 1.2rem;

  /* line-heights */
  --lh-body: 1.35;
  --lh-tight: 1.1;
  --lh-relaxed: 1.5;

  /* motion */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --ease-standard: cubic-bezier(.2,.8,.2,1);

  /* control sizing (md defaults) */
  --ctl-h-sm: 32px;
  --ctl-h-md: 40px;
  --ctl-h-lg: 48px;

  --ctl-px-sm: var(--s-2_5);
  --ctl-px-md: var(--s-3);
  --ctl-px-lg: var(--s-3_5);

  --ctl-gap: var(--s-2);

  /* focus */
  --focus-outline: 2px solid var(--primary);
  --focus-offset: 2px;
  --focus-shadow: 0 0 0 3px rgba(210,179,123,0.28);

  /* z-index */
  --z-base: 1;
  --z-sticky: 10;
  --z-floating: 50;
  --z-dock: 55;
  --z-popover: 56;
  --z-fab: 60;
  --z-fabmenu: 65;
  --z-sheet-backdrop: 80;
  --z-sheet: 90;
  --z-toast: 110;

  /* shadows */
  --shadow: 0 10px 26px rgba(0,0,0,0.40);
  --shadow-strong: 0 18px 56px rgba(0,0,0,0.55);
  --shadow-soft: 0 10px 26px rgba(0,0,0,0.30);
  --shadow-med: 0 12px 34px rgba(0,0,0,0.40);
  --shadow-pop: 0 16px 46px rgba(0,0,0,0.50);
  --shadow-1: var(--shadow-soft);
  --shadow-2: var(--shadow-med);

  /* colors */
  --bg: #0f1114;
  --panel: #10141b;
  --card: #141820;
  --text: #e7edf6;
  --muted: rgba(231,237,246,0.65);
  --border: rgba(255,255,255,0.10);

  /* toast */
  --toast-bg: rgba(20, 24, 28, .92);
  --toast-text: #fff;

  --primary: #d2b37b;
  --primary-2: #b8945f;
  --gold-weak: rgba(210,179,123,0.22);

  --overlay-bg: rgba(0, 0, 0, .55);
  --overlay-bg-active: rgba(0, 0, 0, .7);

  --overlay-icon: #fff;
  --overlay-accent: var(--primary); /* dein Champagner-Gold */
}

/* Light theme overrides
   - Activated via: document.documentElement.dataset.theme = "light"
   - Keep overrides complete enough so Light isn't "Dark with a bright background".
*/
:root[data-theme="light"]{
  /* backgrounds */
  --bg: #f4efe6;          /* Champagnerweiß */
  --panel: #FFFFFF;
  --card: #ffffff;

  /* text */
  --text: #2B2B2B;        /* weicher als #15181d */
  --muted: rgba(43,43,43,0.62);

  /* borders */
  --border: rgba(43,43,43,0.10); /* weniger hart */

  /* shadows – flacher & natürlicher */
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.04),
                 0 6px 18px rgba(0,0,0,0.06);

  --shadow-med:  0 2px 6px rgba(0,0,0,0.06),
                 0 12px 32px rgba(0,0,0,0.08);

  --shadow-pop:  0 4px 10px rgba(0,0,0,0.08),
                 0 18px 42px rgba(0,0,0,0.10);

  --shadow: var(--shadow-soft);
  --shadow-strong: var(--shadow-med);
  --shadow-1: var(--shadow-soft);
  --shadow-2: var(--shadow-med);

  /* toast */
  --toast-bg: rgba(255,255,255,0.97);
  --toast-text: #2B2B2B;

  /* overlays */
  --overlay-bg: rgba(0,0,0,0.32);
  --overlay-bg-active: rgba(0,0,0,0.42);
  --overlay-icon: #2B2B2B;
}