src/index.css

@import "tailwindcss";

@theme {
  --font-sans: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif;
  --color-panel-bg: var(--panel-bg);
  --color-panel-border: var(--panel-border);
  --color-canvas-bg: var(--canvas-bg);
  --color-ui-primary: var(--ui-primary);
  --color-ui-secondary: var(--ui-secondary);
  --color-accent-blue: var(--accent);
  --color-accent-amber: #FFD60A;
}

/* ═══ Theme: Dark Canvas (default) ═══ */
:root, [data-theme="dark-canvas"] {
  --canvas-bg: #141414;
  --panel-bg: #1C1C1E;
  --panel-surface: #2A2A2E;
  --panel-border: #3A3A3E;
  --ui-primary: #E5E5E7;
  --ui-secondary: #88888A;
  --accent: #0A84FF;
  --accent-green: #30D158;
  --accent-amber: #FFD60A;
  --accent-red: #FF453A;
}

/* ═══ Theme: Warm Studio ═══ */
[data-theme="warm-studio"] {
  --canvas-bg: #181410;
  --panel-bg: #221F1B;
  --panel-surface: #2E2A24;
  --panel-border: #46403A;
  --ui-primary: #F0EAE0;
  --ui-secondary: #9A9080;
  --accent: #D4A373;
  --accent-green: #8FBF6A;
  --accent-amber: #E8C45A;
  --accent-red: #D45A4A;
}

/* ═══ Theme: Midnight ═══ */
[data-theme="midnight"] {
  --canvas-bg: #0A0E14;
  --panel-bg: #0F1319;
  --panel-surface: #171D28;
  --panel-border: #253040;
  --ui-primary: #D5DBEB;
  --ui-secondary: #6B7A95;
  --accent: #6C89E8;
  --accent-green: #5EC4A0;
  --accent-amber: #E8C84A;
  --accent-red: #E85C5C;
}

body {
  background-color: var(--panel-bg);
  color: var(--ui-primary);
  font-family: var(--font-sans);
  margin: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ui-secondary); }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.rich-text-editor a { color: var(--accent); text-decoration: underline; }
.rich-text-editor ul { list-style: disc inside; }
.rich-text-editor ol { list-style: decimal inside; }