*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ══════════════════════════════════════════════════════════════
     Backward-kompatible Aliase
     Alte Variablen-Namen → neue semantische Tokens aus theme-defaults.css.
     Werden schrittweise entfernt sobald alle Module migriert sind.
     ══════════════════════════════════════════════════════════════ */

  /* preview-* → semantische Tokens */
  --preview-sidebar-bg: var(--bg-surface);
  --preview-sidebar-hover: var(--bg-surface-hover);
  --preview-content-bg: var(--bg-app);
  --preview-card-bg: var(--bg-surface);
  --preview-border: var(--border-default);
  --preview-text-primary: var(--text-primary);
  --preview-text-secondary: var(--text-secondary);
  --preview-primary: var(--accent);
  --preview-success: var(--signal-green);

  /* hr-signal Aliase */
  --hr-signal-red: var(--signal-red);
  --hr-signal-red-light: var(--signal-red-light);

  /* c-ink → Text-Tokens */
  --c-ink-900: var(--text-primary);
  --c-ink-700: var(--text-primary);
  --c-ink-500: var(--text-secondary);

  /* c-teal → Accent-Tokens */
  --c-teal-700: var(--accent);
  --c-teal-600: var(--accent);
  --c-teal-500: var(--accent);
  --c-teal-300: var(--accent-hover);
  --c-teal-200: var(--accent-soft);

  /* bg-* Aliase */
  --bg: var(--bg-app);
  --bg-main: var(--bg-app);
  --bg-main-deep: var(--bg-surface-alt);
  --bg-side: var(--bg-surface-alt);
  --bg-side-soft: var(--bg-surface-alt);

  /* card/border Aliase */
  --card-white: var(--bg-surface);
  --border-light: var(--border-default);
  --border: var(--border-default);

  /* text Aliase */
  --text: var(--text-primary);
  --text2: var(--text-secondary);
  --text3: var(--text-tertiary);

  /* accent Aliase */
  --accent-mint: var(--accent);

  --tab-active: var(--accent-soft);

  --menu-font-size: 13px;
  --menu-icon-size: 20px;

  /* nav Aliase */
  --nav-text: var(--nav-item-color);
  --nav-text-hover: var(--text-on-accent);
  --nav-hover-bg: var(--nav-item-hover-bg);
  --nav-active-text: var(--text-on-accent);
  --nav-active-bg: var(--accent);

  --shell-shadow: var(--shadow-lg);
  --shell-border: var(--border-default);
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--preview-content-bg);
  -webkit-font-smoothing: antialiased;
}