:root {
  /* --- Optik-Ueberarbeitung: angelehnt an den D&D-Beyond-Charakterbogen
     (Dark Theme). Neutrales, sehr dunkles Anthrazit statt Mitternachtsblau,
     kraeftiges D&D-Rot als Haupt-Akzent, kondensierte Grotesk fuer Labels
     und Inter fuer Fliesstext. Variablennamen bleiben bewusst gleich, damit
     alle bestehenden Regeln weiter greifen. --- */
  --ink-950: #0c0d10;
  --ink-900: #121317;
  --ink-800: #181a1f;
  --ink-700: #202329;
  --ink-600: #2a2e36;
  --ink-500: #363b45;

  --border: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.055);
  --border-strong: rgba(255, 255, 255, 0.18);

  --parchment: #e8eaee;
  --parchment-dim: #b3b8c2;
  --parchment-muted: #8b909b;
  --gold: #e8eaee;
  --gold-strong: #ffffff;

  --accent: #d0464a;
  --accent-hover: #e05a5e;
  --accent-soft: rgba(208, 70, 74, 0.16);
  --accent-line: rgba(208, 70, 74, 0.45);
  --accent-text: #ef7b7e;
  --on-accent: #ffffff;

  --accent-ember: #d98b4a;
  --accent-ember-hover: #e8a06a;
  --accent-ember-soft: rgba(217, 139, 74, 0.16);

  --accent-arcane: #8f7fd4;
  --accent-arcane-hover: #a495dd;
  --accent-arcane-soft: rgba(143, 127, 212, 0.18);

  --glow: #d0464a;
  --glow-soft: rgba(208, 70, 74, 0.16);

  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: 14px;

  --danger: #a4453a;
  --danger-hover: #b95349;
  --danger-text: #e0736a;
  --success: #5aa96a;
  --info: #6aa9d8;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.5);

  --font-display: "Barlow Condensed", "Inter", system-ui, sans-serif;
  --font-title: "Cinzel", Georgia, serif;
  --font-body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", "Consolas", monospace;

  --theme-hero-overlay-start: rgba(12,13,16,0.35);
  --theme-hero-overlay-mid: rgba(12,13,16,0.45);
  --theme-hero-overlay-end: rgba(12,13,16,0.88);
  --theme-panel-bg: rgba(18,19,23,0.72);
  --theme-panel-input-bg: rgba(6,9,15,0.55);
  --theme-topbar-bg: rgba(10,15,30,0.72);
  --theme-sidebar-bg: rgba(6,9,15,0.55);
  --theme-chip-bg: rgba(255,255,255,0.035);
  --theme-chip-border: rgba(255,255,255,0.12);
  --theme-chip-text: var(--parchment);
  --theme-chip-muted: var(--parchment-muted);
  --theme-hero-image: url("/assets/unwritten-realm-hero.png");
  --theme-hero-image-opacity: 1;
  --theme-hero-image-brightness: 1;
  --theme-card-overlay: rgba(8,10,16,0.18);
}

html[data-theme="warm"] {
  --ink-950: #18120d;
  --ink-900: #241b14;
  --ink-800: #2c2219;
  --ink-700: #382c22;
  --ink-600: #49382b;
  --ink-500: #5d4838;
  --border: rgba(255, 243, 225, 0.14);
  --border-soft: rgba(255, 243, 225, 0.08);
  --border-strong: rgba(122, 92, 59, 0.26);
  --parchment: #f6eee1;
  --parchment-dim: #dbcab1;
  --parchment-muted: #b49d82;
  --gold: #efcf95;
  --gold-strong: #fff5e4;
  --accent: #bf5b44;
  --accent-hover: #ce6c55;
  --accent-soft: rgba(191, 91, 68, 0.14);
  --accent-line: rgba(191, 91, 68, 0.34);
  --accent-text: #e7947d;
  --on-accent: #fff8f1;
  --accent-ember: #d49b58;
  --accent-ember-hover: #dfab72;
  --accent-arcane: #8c7fb1;
  --accent-arcane-hover: #a195c4;
  --accent-arcane-soft: rgba(140, 127, 177, 0.16);
  --glow: #bf6e4f;
  --glow-soft: rgba(191, 110, 79, 0.16);
  --glass-bg: rgba(255, 247, 235, 0.04);
  --glass-border: rgba(255, 243, 225, 0.14);
  --theme-hero-overlay-start: rgba(33,23,14,0.28);
  --theme-hero-overlay-mid: rgba(33,23,14,0.42);
  --theme-hero-overlay-end: rgba(23,16,11,0.82);
  --theme-panel-bg: rgba(34,25,18,0.72);
  --theme-panel-input-bg: rgba(24,18,13,0.54);
  --theme-topbar-bg: rgba(39,29,21,0.72);
  --theme-sidebar-bg: rgba(29,22,16,0.56);
  --theme-chip-bg: rgba(255, 243, 225, 0.04);
  --theme-chip-border: rgba(255, 243, 225, 0.14);
  --theme-chip-text: #f6eee1;
  --theme-chip-muted: #ccb696;
  --realm-bg: #120e08;
  --realm-surface: rgb(255 243 225 / .06);
  --realm-surface-strong: rgb(255 243 225 / .10);
  --realm-line: rgb(240 212 160 / .24);
  --realm-line-soft: rgb(255 243 225 / .10);
  --realm-text: #fff6e7;
  --realm-muted: rgb(255 236 208 / .66);
  --realm-faint: rgb(255 236 208 / .48);
  --realm-gold: #efcf95;
  --realm-violet: #8a779d;
  --realm-panel: rgb(22 16 12 / .86);
}

html[data-theme="light"] {
  /* Helles Theme: neutrales, leicht graues Grau (kein Parchment/Warmton mehr)
     mit Ember-Akzent (Gold/Rot). Panels bewusst transparenter als vorher,
     damit der Glass-Effekt (Blur + durchscheinender Hintergrund) im Hellen
     genauso traegt wie im Dunklen. */
  --ink-950: #eef0f2;
  --ink-900: #f5f6f7;
  --ink-800: #e9ebee;
  --ink-700: #dde0e4;
  --ink-600: #ced1d6;
  --ink-500: #b9bdc3;
  --border: rgba(24, 26, 30, 0.12);
  --border-soft: rgba(24, 26, 30, 0.07);
  --border-strong: rgba(24, 26, 30, 0.20);
  --parchment: #23262b;
  --parchment-dim: #52565e;
  --parchment-muted: #7d818a;
  --gold: #8a611a;
  --gold-strong: #7a5414;
  --accent: #c8434c;
  --accent-hover: #b23640;
  --accent-soft: rgba(200, 67, 76, 0.12);
  --accent-line: rgba(200, 67, 76, 0.28);
  --accent-text: #a8323a;
  --on-accent: #ffffff;
  --accent-ember: #b6791f;
  --accent-ember-hover: #c98a2c;
  --accent-arcane: #7a68c9;
  --accent-arcane-hover: #8f7fd4;
  --accent-arcane-soft: rgba(122, 104, 201, 0.14);
  --glow: #c8434c;
  --glow-soft: rgba(200, 67, 76, 0.12);
  --glass-bg: rgba(255, 255, 255, 0.50);
  --glass-border: rgba(168, 120, 40, 0.26);
  --danger: #b23a3a;
  --danger-hover: #c94848;
  --danger-text: #9c2f2f;
  --success: #3f8a52;
  --info: #3f7fb0;
  --shadow-sm: 0 1px 2px rgba(20,22,26,0.08);
  --shadow-md: 0 6px 20px rgba(20,22,26,0.10);
  --shadow-lg: 0 18px 48px rgba(20,22,26,0.14);
  --theme-hero-overlay-start: rgba(240,241,243,0.40);
  --theme-hero-overlay-mid: rgba(234,236,238,0.58);
  --theme-hero-overlay-end: rgba(224,227,230,0.90);
  --theme-panel-bg: rgba(255, 255, 255, 0.50);
  --theme-panel-input-bg: rgba(255, 255, 255, 0.70);
  --theme-topbar-bg: rgba(255, 255, 255, 0.50);
  --theme-sidebar-bg: rgba(255, 255, 255, 0.40);
  --theme-chip-bg: rgba(255,255,255,0.50);
  --theme-chip-border: rgba(24,26,30,0.10);
  --theme-chip-text: #23262b;
  --theme-chip-muted: #7d818a;
  --realm-bg: #eef0f2;
  --realm-surface: rgb(24 26 30 / .05);
  --realm-surface-strong: rgb(24 26 30 / .08);
  --realm-line: rgb(24 26 30 / .14);
  --realm-line-soft: rgb(24 26 30 / .08);
  --realm-text: #23262b;
  --realm-muted: rgb(35 38 43 / .68);
  --realm-faint: rgb(35 38 43 / .48);
  --realm-gold: #8a611a;
  --realm-violet: #7a68c9;
  --realm-panel: rgb(255 255 255 / .55);
}

:root {
  --realm-bg: #000;
  --realm-surface: rgb(255 255 255 / .05);
  --realm-surface-strong: rgb(255 255 255 / .08);
  --realm-line: rgb(255 255 255 / .18);
  --realm-line-soft: rgb(255 255 255 / .08);
  --realm-text: #fff;
  --realm-muted: rgb(255 255 255 / .58);
  --realm-faint: rgb(255 255 255 / .42);
  --realm-gold: #d9b86f;
  --realm-violet: #5b477b;
  --realm-panel: rgb(7 9 11 / .88);
  --realm-font-body: "Geist", var(--font-body);
  --realm-font-mono: "Geist Mono", var(--font-mono);
  --realm-font-display: "Archivo Black", var(--font-display);
}