/*
 * RPU Themes — generiert aus branding/theme.json
 * Stand: 2026-05-19. Diese Datei NICHT direkt editieren — Änderungen in
 * theme.json + 'python3 tools/generate_themes.py' neu erzeugen.
 */

/* ────────── Layout + Typografie (theme-unabhängig) ────────── */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.18);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --max-width-text: 760px;
  --max-width-content: 1280px;
  --size-xs: 12px;
  --size-sm: 14px;
  --size-base: 16px;
  --size-md: 18px;
  --size-lg: 22px;
  --size-xl: 28px;
  --size-2xl: 36px;
  --size-3xl: 48px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Komponenten-Aliase (verweisen auf Theme-Variablen) */
  --button-primary-bg: var(--accent-deep);
  --button-primary-text: var(--surface);
  --button-primary-hover-bg: var(--accent);
  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-6);
  --input-bg: var(--surface);
  --input-border: var(--border);
  --input-focus-border: var(--accent);
  --topbar-bg: var(--accent-deep);
  --topbar-text: var(--surface);
  --topbar-accent-line: var(--accent);
}

/* ────────── Theme: Studio (Default) ────────── */
:root,
[data-theme="studio"] {
  color-scheme: light;
  --bg: #F4F0E8;
  --bg-deep: #ECE6D8;
  --surface: #FBF9F4;
  --surface-alt: #F4F1E8;
  --ink: #1A1410;
  --ink-soft: #2C2620;
  --muted: #7A736A;
  --subtle: #C8C0B5;
  --border: #DED7C6;
  --border-strong: #C8C0B5;
  --hairline: rgba(26, 20, 16, 0.08);
  --accent: #8C7A5B;
  --accent-deep: #5C4F38;
  --accent-soft: rgba(140, 122, 91, 0.12);
  --accent-mid: rgba(140, 122, 91, 0.5);
  --info: #4A6B8C;
  --info-soft: #E0EAF3;
  --success: #6B7A4F;
  --success-soft: #E7ECDD;
  --warning: #B66B00;
  --warning-soft: #FFF1D6;
  --danger: #B85C38;
  --danger-soft: #F8E4DC;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;
}

/* ────────── Theme: Lab ────────── */
[data-theme="lab"] {
  color-scheme: dark;
  --bg: #1F1B2E;
  --bg-deep: #161229;
  --surface: #2A2540;
  --surface-alt: #363052;
  --ink: #F4F2FB;
  --ink-soft: #D6D2E8;
  --muted: #9990AE;
  --subtle: #6B6386;
  --border: #3D365A;
  --border-strong: #534B73;
  --hairline: rgba(244, 242, 251, 0.08);
  --accent: #667EEA;
  --accent-deep: #764BA2;
  --accent-soft: rgba(102, 126, 234, 0.18);
  --accent-mid: rgba(102, 126, 234, 0.5);
  --accent-gradient: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  --info: #5DB4E8;
  --info-soft: rgba(93, 180, 232, 0.18);
  --success: #5DC988;
  --success-soft: rgba(93, 201, 136, 0.18);
  --warning: #FFC857;
  --warning-soft: rgba(255, 200, 87, 0.18);
  --danger: #FF7A7A;
  --danger-soft: rgba(255, 122, 122, 0.18);
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ────────── Globale Defaults ────────── */
html { font-size: var(--size-base); }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); }


/* Theme-Switcher — kompakte Pille, oben rechts in App-Headern empfohlen */
.rpu-theme-switcher {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.rpu-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s ease;
}
.rpu-theme-btn:hover { color: var(--ink); }
.rpu-theme-btn.active {
  background: var(--accent);
  color: var(--surface);
}
.rpu-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.rpu-swatch-studio { background: linear-gradient(135deg, #FBF9F4 50%, #8C7A5B 50%); border: 1px solid rgba(0,0,0,0.1); }
.rpu-swatch-lab    { background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%); }