/* ========================================
   Talnova Theme System
   ======================================== */

/* Light theme (default) */
:root,
:root[data-theme="light"] {
  /* Page backgrounds */
  --theme-bg: #f5f7fa;
  --theme-bg-secondary: #eef1f5;
  --theme-surface: #ffffff;
  --theme-surface-raised: #f9fafb;

  /* Text */
  --theme-text: #111827;
  --theme-text-secondary: #6b7280;
  --theme-text-tertiary: #9ca3af;
  --theme-text-inverted: #ffffff;

  /* Borders */
  --theme-border: #e5e7eb;
  --theme-border-light: #f0f0f0;

  /* Layout chrome */
  --theme-topbar-bg: #ffffff;
  --theme-sidebar-bg: #ffffff;
  --theme-sidebar-border: #e5e7eb;
  --theme-sidebar-text: #374151;
  --theme-sidebar-text-muted: #9ca3af;
  --theme-sidebar-hover: #f3f4f6;
  --theme-sidebar-active: #e8f4fc;
  --theme-sidebar-active-text: #2BA4DC;
  --theme-sidebar-active-border: #2BA4DC;
  --theme-sidebar-group-text: #6b7280;

  /* Inputs */
  --theme-input-bg: #ffffff;
  --theme-input-border: #d1d5db;

  /* Content areas */
  --theme-content-bg: #ffffff;
  --theme-content-text: #111827;

  /* Status (warning banners etc) */
  --theme-warning-bg: #fff3cd;
  --theme-warning-border: #ffc107;
  --theme-warning-text: #856404;
}

/* Dark theme */
:root[data-theme="dark"] {
  /* Page backgrounds */
  --theme-bg: #0f1623;
  --theme-bg-secondary: #151d2c;
  --theme-surface: #1a2332;
  --theme-surface-raised: #1e2a3a;

  /* Text */
  --theme-text: #f1f5f9;
  --theme-text-secondary: #94a3b8;
  --theme-text-tertiary: #64748b;
  --theme-text-inverted: #111827;

  /* Borders */
  --theme-border: #2d3a4d;
  --theme-border-light: #243044;

  /* Layout chrome */
  --theme-topbar-bg: #0c1220;
  --theme-sidebar-bg: #141e2e;
  --theme-sidebar-border: #243044;
  --theme-sidebar-text: #cbd5e1;
  --theme-sidebar-text-muted: #64748b;
  --theme-sidebar-hover: #1e2d40;
  --theme-sidebar-active: #172a3e;
  --theme-sidebar-active-text: #4db8e8;
  --theme-sidebar-active-border: #2BA4DC;
  --theme-sidebar-group-text: #64748b;

  /* Inputs */
  --theme-input-bg: #1a2332;
  --theme-input-border: #2d3a4d;

  /* Content areas */
  --theme-content-bg: #1a2332;
  --theme-content-text: #f1f5f9;

  /* Status */
  --theme-warning-bg: #3d2e00;
  --theme-warning-border: #d4a017;
  --theme-warning-text: #fcd34d;

  color-scheme: dark;
}

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