:root {
  /* White Luxury Base (Pure Minimalist Luxury) */
  --bg-primary: #F8F8F5;       /* Warm, noble gallery off-white (Alabaster) */
  --bg-secondary: #F1F1ED;     /* Subtle off-grey structure white */
  --text-primary: #0D0D0D;     /* Mathematically sharp geometric black / deep anthracite */
  --text-secondary: #555555;   /* Muted grey for sub-elements (highly legible) */
  
  /* Curated Story Chat Room Shades (Light Mode) */
  --story-shade-0: #FFFFFF;    /* Pure noble white */
  --story-shade-1: #FAF8F5;    /* Warm alabaster off-white */
  --story-shade-2: #F5F2EB;    /* Exclusive cream beige */
  --story-shade-3: #ECE9E0;    /* Soft noble off-grey/beige */
  --story-bubble-text: #000000; /* Deep sattes Schwarz */
  
  /* Geometric Accents & Borders */
  --border-pure: #E6E6E3;      /* Delicate off-grey borders */
  --accent-lux: #0D0D0D;
  
  /* Smooth High-End Transitions */
  --transition-fluid: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Ultra-premium ease-out */
  
  /* Typography Symmetry */
  --font-geometric: "Inter", "Helvetica Neue", Arial, sans-serif;
  --tracking-iconic: 0.15em;   /* Wide letter-spacing for titles */
  --text-glow: none;

  /* Layout Constants */
  --header-height: 90px;
  --drawer-width: 280px;
  --max-content-width: 760px;
  --blur-glass: 24px;
  --header-bg: rgba(251, 251, 250, 0.75);
  --drawer-bg: rgba(251, 251, 250, 0.95);
  --drawer-toggle-bg: rgba(251, 251, 250, 0.85);

  /* Legacy Mapping for Seamless Integration */
  --bg-deep: var(--bg-primary);
  --bg-panel: var(--bg-secondary);
  --bg-card: #ffffff;
  --text-muted: var(--text-secondary);
  --color-accent: var(--accent-lux);
  --color-accent-hover: #444444;
  --color-accent-glow: rgba(0, 0, 0, 0.03);
  --color-glow-blue: rgba(0, 0, 0, 0.01);
  --color-glow-amber: rgba(0, 0, 0, 0.01);
  --border-light: var(--border-pure);
  --border-medium: var(--border-pure);
  --border-accent: var(--border-pure);
  --font-serif: "Cinzel", Georgia, serif;
  --font-sans: var(--font-geometric);
  --shadow-premium: 0 20px 50px rgba(0, 0, 0, 0.03);
  --shadow-glow: none;
  --transition-slow: var(--transition-fluid);
  --transition-medium: var(--transition-fluid);
  --transition-fast: all 0.2s ease-in-out;
}

/* Obsidian Theme / Cinema-Mode / Dark Toggle Overrides */
.theme-obsidian, 
[data-theme="obsidian"],
.kino-section-active,
body.cinema-dimmed {
  --bg-primary: #0A0A0A;       /* Deep, infinite cinematic void */
  --bg-secondary: #121212;     /* Matte studio black */
  --text-primary: #F5F5F7;     /* Crisp luxury white text */
  --text-secondary: #8E8E93;   /* Premium metallic grey */
  
  /* Curated Story Chat Room Shades (Dark Mode) */
  --story-shade-0: #121212;    /* Matte studio black */
  --story-shade-1: #18181B;    /* Zinc obsidian dark */
  --story-shade-2: #0F0F10;    /* Deep obsidian void */
  --story-shade-3: #1D1D20;    /* Matte charcoal dark */
  --story-bubble-text: #FFFFFF; /* Pure crisp white */
  --border-pure: #222222;
  --accent-lux: #F5F5F7;
  --text-glow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 15px rgba(124, 58, 237, 0.9), 0 0 30px rgba(99, 102, 241, 0.7), 0 0 50px rgba(99, 102, 241, 0.4);
  --header-bg: rgba(10, 10, 10, 0.75);
  --drawer-bg: rgba(18, 18, 18, 0.95);
  --drawer-toggle-bg: rgba(18, 18, 18, 0.85);

  /* Mappings for Dark Theme Mode */
  --bg-deep: var(--bg-primary);
  --bg-panel: var(--bg-secondary);
  --bg-card: #18181b;
  --text-muted: var(--text-secondary);
  --color-accent: var(--accent-lux);
  --color-accent-hover: #dddddd;
  --color-accent-glow: rgba(255, 255, 255, 0.05);
  --border-light: var(--border-pure);
  --border-medium: var(--border-pure);
  --border-accent: var(--border-pure);
  --shadow-premium: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Global Reset Anchor for Geometric Perfection */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  letter-spacing: var(--tracking-iconic);
  font-family: var(--font-geometric);
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: var(--transition-fluid);
}