/* ══════════════════════════════════════════════════════════════════
   electronhub-demo — Design-Tokens
   Alles über Variablen: Fonts, Farben, Radien, Timings.
   Der Akzent wird über das Tweaks-Panel zur Laufzeit gesetzt
   (localStorage → data-eh-accent / data-eh-theme auf <html>).
   ══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Departure Mono";
  src: url("../assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --font-display: "Departure Mono", "Geist Mono", ui-monospace, monospace;

  /* Layout */
  --max-w: 1152px;
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 16px;
  --radius-4: 22px;

  /* Akzent — Violett ist die Markenfarbe (Tweaks-Default).
     -2/-3 sind dunklere Stufen; bei freier Farbwahl leitet main.js
     diese Stufen via color-mix ab, hier gelten die Originalwerte. */
  --lp-accent: #a78bfa;
  --lp-accent-2: #8b5cf6;
  --lp-accent-3: #7c3aed;
  --lp-accent-ink: #0d0b14;
  --lp-accent-fg: #0a090e;
  --lp-accent-soft: color-mix(in oklab, var(--lp-accent) 14%, transparent);
  --lp-accent-glow: color-mix(in oklab, var(--lp-accent-2) 32%, transparent);
  --lp-accent-line: color-mix(in oklab, var(--lp-accent) 42%, transparent);

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 640ms;
}

/* ── Theme: dark (Default) ─────────────────────────────────────── */
:root,
[data-eh-theme="dark"] {
  color-scheme: dark;
  --bg: #0a090e;
  --bg-0: #0a090e;
  --bg-1: #0e0d14;
  --bg-2: #14131b;
  --bg-3: #1a1924;
  --bg-hover: #181722;
  --border: #1c1b25;
  --border-strong: #2a2934;
  --fg: #ededee;
  --fg-2: #c9cace;
  --fg-muted: #8b8d95;
  --fg-dim: #5e6068;
  --fg-faint: #3f414a;
  --success: oklch(0.72 0.15 152);
  --success-soft: oklch(0.72 0.15 152 / 0.13);
  --warning: oklch(0.79 0.13 78);
  --danger: oklch(0.7 0.18 25);
  --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 38%);
  --hairline: rgba(255, 255, 255, 0.06);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 32px rgba(0, 0, 0, 0.42);
  --shadow-pop: 0 0 0 1px var(--border-strong), 0 16px 48px rgba(0, 0, 0, 0.6);
  --code-bg: #0c0b11;
  --glow-soft: color-mix(in oklab, var(--lp-accent) 9%, transparent);
}

/* ── Theme: light ──────────────────────────────────────────────── */
[data-eh-theme="light"] {
  color-scheme: light;
  --bg: #fbfbfa;
  --bg-0: #fbfbfa;
  --bg-1: #ffffff;
  --bg-2: #f4f3f7;
  --bg-3: #ecebf1;
  --bg-hover: #f1f0f5;
  --border: #e7e6ed;
  --border-strong: #d4d3dc;
  --fg: #0d0c13;
  --fg-2: #2a2935;
  --fg-muted: #62616d;
  --fg-dim: #8a8995;
  --fg-faint: #b8b7c2;
  --card-sheen: none;
  --hairline: rgba(10, 9, 14, 0.07);
  --shadow-card: 0 1px 2px rgba(10, 11, 13, 0.05), 0 8px 24px rgba(10, 11, 13, 0.05);
  --shadow-pop: 0 0 0 1px var(--border-strong), 0 16px 48px rgba(10, 11, 13, 0.12);
  --code-bg: #17161f;
  --lp-accent-fg: #ffffff;
  --glow-soft: color-mix(in oklab, var(--lp-accent) 12%, transparent);
}