/* =========================================================
   THEME — DESIGN SYSTEM VARIABLES + NEUTRAL ALIASES
   ========================================================= */
:root {
    /* ---------------------------------------------------------
       Typography
    --------------------------------------------------------- */
  --base-font: 16px;
  --line-height: 1.4;

  --font-scale-sm: 0.85rem;
  --font-scale-md: 1rem;
  --font-scale-lg: 1.25rem;
  --font-scale-xl: 1.6rem;

  /* ---------------------------------------------------------
     Spacing
  --------------------------------------------------------- */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* ---------------------------------------------------------
     Gaps
  --------------------------------------------------------- */
  --gap-xxs: 0.25rem;
  --gap-xs: 0.5rem;
  --gap-sm: 0.75rem;
  --gap-md: 1rem;
  --gap-lg: 1.5rem;
  --gap-xl: 2rem;

  /* ---------------------------------------------------------
     Radii
  --------------------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* ---------------------------------------------------------
     Shadows
  --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.2);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.25);

  /* ---------------------------------------------------------
     Light Mode Palette
  --------------------------------------------------------- */
  --bg-light: #e8e8e8;
  --text-light: #222;

  --sidebar-light: #f7f7f7;
  --sidebar-border-light: #ccc;

  --bubble-user-light: #7fb8a4;
  --bubble-ai-light: #bcbcbc;

  --bar-bg-light: rgba(0,0,0,0.08);
  --bar-border-light: rgba(0,0,0,0.15);
  --bar-text-light: #000;

  --modal-bg-light: #ffffff;
  --modal-text-light: #222;
  --modal-border-light: #ddd;

  --editor-bg-light: #fafafa;
  --editor-text-light: #222;

  /* ---------------------------------------------------------
     Dark Mode Palette
  --------------------------------------------------------- */
  --bg-dark: #111;
  --text-dark: #eee;

  --sidebar-dark: #1a1a1a;
  --sidebar-border-dark: #333;

  --bubble-user-dark: #267a66;
  --bubble-ai-dark: #2a2a2a;

  --bar-bg-dark: rgba(255,255,255,0.08);
  --bar-border-dark: rgba(255,255,255,0.15);
  --bar-text-dark: #fff;

  --modal-bg-dark: #1a1a1a;
  --modal-text-dark: #eee;
  --modal-border-dark: #444;

  --editor-bg-dark: #222;
  --editor-text-dark: #eee;

  /* ---------------------------------------------------------
     Buttons
  --------------------------------------------------------- */
  --btn-bg: #4a7a9c;
  --btn-text: #fff;
  --btn-bg-hover: #5a8ab0;

  --btn-muted-bg: #ccc;
  --btn-muted-text: #222;
  --btn-muted-hover: #bbb;

  --btn-danger-bg: #b33a3a;
  --btn-danger-text: #fff;
  --btn-danger-hover: #c44a4a;

  --btn-success-bg: #3a8b4a;
  --btn-success-text: #fff;
  --btn-success-hover: #4a9c5a;

  /* ---------------------------------------------------------
     Brand Accent
  --------------------------------------------------------- */
  --brand-accent: #c49b3a;

  /* ---------------------------------------------------------
     Splash Screen
  --------------------------------------------------------- */
  --splash-bg: #f4f0e8;
  --splash-title: #3a3a3a;
  --splash-subtitle: #555;
  --silhouette-opacity: 0.85;

  /* ---------------------------------------------------------
     Misc
  --------------------------------------------------------- */
  --editor-border: 1px solid rgba(0,0,0,0.15);

  /* ---------------------------------------------------------
     Backdrop Variables
  --------------------------------------------------------- */
  --modal-backdrop: rgba(0,0,0,0.4);
  --modal-backdrop-strong: rgba(0,0,0,0.55);

  /* ---------------------------------------------------------
     Neutral Variable Aliases (LIGHT DEFAULTS)
     These are the variables your components actually use.
     They MUST be inside the same :root block as the palette.
  --------------------------------------------------------- */
  --bg: var(--bg-light);
  --text: var(--text-light);

  --sidebar-bg: var(--sidebar-light);
  --sidebar-border: var(--sidebar-border-light);

  --bubble-user-bg: var(--bubble-user-light);
  --bubble-ai-bg: var(--bubble-ai-light);

  --bar-bg: var(--bar-bg-light);
  --bar-border: var(--bar-border-light);
  --bar-text: var(--bar-text-light);

  --modal-bg: var(--modal-bg-light);
  --modal-text: var(--modal-text-light);
  --modal-border: var(--modal-border-light);

  --editor-bg: var(--editor-bg-light);
  --editor-text: var(--editor-text-light);
}

/* =========================================================
   THEME — DARK MODE OVERRIDES
   ========================================================= */

:root[data-theme="dark"] {
  --bg: var(--bg-dark);
  --text: var(--text-dark);

  --sidebar-bg: var(--sidebar-dark);
  --sidebar-border: var(--sidebar-border-dark);

  --bubble-user-bg: var(--bubble-user-dark);
  --bubble-ai-bg: var(--bubble-ai-dark);

  --bar-bg: var(--bar-bg-dark);
  --bar-border: var(--bar-border-dark);
  --bar-text: var(--bar-text-dark);

  --modal-bg: var(--modal-bg-dark);
  --modal-text: var(--modal-text-dark);
  --modal-border: var(--modal-border-dark);

  --editor-bg: var(--editor-bg-dark);
  --editor-text: var(--editor-text-dark);
}