/* Application theme: maroon, red, gray, black, white */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Maroon — primary brand (matches sidebar) */
  --theme-maroon: #800000;
  --theme-maroon-deep: #5c0000;
  --theme-maroon-bright: #9a1818;
  --theme-maroon-soft: #fbe8e8;
  --theme-maroon-border: rgba(128, 0, 0, 0.22);

  /* Red accent — CTAs, status, focus */
  --theme-red: #b91c1c;
  --theme-red-bright: #c42d2d;
  --theme-red-deep: #7f1d1d;
  --theme-red-soft: #fef2f2;
  --theme-red-border: #fecaca;
  --theme-red-tint: rgba(128, 0, 0, 0.1);
  --theme-red-muted: #fca5a5;

  --theme-black: #0c0a0a;
  --theme-white: #ffffff;

  /* Cool grays — page + UI chrome */
  --theme-gray-50: #f4f4f5;
  --theme-gray-100: #e4e4e7;
  --theme-gray-200: #d4d4d8;
  --theme-gray-400: #a1a1aa;
  --theme-gray-500: #71717a;
  --theme-gray-600: #52525b;
  --theme-gray-700: #3f3f46;
  --theme-gray-900: #18181b;

  /* Sidebar */
  --sidebar-maroon: #800000;
  --sidebar-maroon-deep: rgb(96, 0, 0);
  --sidebar-maroon-darkest: rgb(64, 0, 0);

  /* Page canvas — visible gray behind content */
  --app-canvas: #e2e3e8;
  --app-canvas-mid: #d8d9df;

  /* Semantic aliases */
  --text: var(--theme-gray-600);
  --text-h: var(--theme-black);
  --bg: var(--app-canvas);
  --bg-elevated: var(--theme-white);
  --border: var(--theme-gray-200);
  --code-bg: var(--theme-gray-50);
  --accent: var(--theme-maroon);
  --accent-soft: var(--theme-maroon-soft);
  --accent-border: var(--theme-maroon);
  --shadow: 0 12px 40px rgba(15, 15, 20, 0.1);

  /* Cards / panels — soft white with crimson wash + maroon edge */
  --surface-card: linear-gradient(165deg, #ffffff 0%, #fff8f7 45%, #fef2f2 100%);
  --surface-card-solid: #ffffff;
  --surface-card-border: rgba(110, 25, 35, 0.18);
  --surface-card-shadow: 0 1px 0 rgba(128, 0, 0, 0.06), 0 14px 36px rgba(0, 0, 0, 0.08);
  --surface-muted: #ebebed;
  --surface-inset: #d9d9de;

  /* Horizontal inset for main content (AppShell bumps when sidebar is open) */
  --app-page-pad-x: 24px;

  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;

  font: 17px/155% var(--sans);
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --theme-maroon-soft: #3a2224;
  --theme-maroon-border: rgba(232, 93, 107, 0.28);
  --theme-red-soft: #3a2224;
  --theme-red-border: #6b4545;
  --theme-red-tint: rgba(232, 93, 107, 0.14);
  --theme-red-muted: #b85c5c;

  --theme-black: #e8ebf0;

  --theme-gray-50: #252a33;
  --theme-gray-100: #2e3440;
  --theme-gray-200: #3a424f;
  --theme-gray-400: #7d8695;
  --theme-gray-500: #9aa3b2;
  --theme-gray-600: #b4bcc8;
  --theme-gray-700: #c8ced8;
  --theme-gray-900: #e8ebf0;

  --app-canvas: #15181d;
  --app-canvas-mid: #1c2128;

  --text: #9aa3b2;
  --text-h: #e8ebf0;
  --bg: #15181d;
  --bg-elevated: #1f242d;
  --border: #343c48;
  --code-bg: #252a33;
  --accent-soft: rgba(232, 93, 107, 0.16);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);

  --surface-card: linear-gradient(165deg, #1e2430 0%, #1a1f28 55%, #171c24 100%);
  --surface-card-solid: #1f242d;
  --surface-card-border: rgba(232, 93, 107, 0.2);
  --surface-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.35);
  --surface-muted: #252a33;
  --surface-inset: #1a1f28;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-weight: 500;
  background: linear-gradient(180deg, var(--app-canvas) 0%, var(--app-canvas-mid) 100%);
  background-attachment: fixed;
  color: var(--text);
}

#root {
  min-height: 100vh;
  height: 100%;
  box-sizing: border-box;
}

h1,
h2,
h3 {
  font-family: var(--heading);
  font-weight: 700;
  color: var(--text-h);
}

p {
  margin: 0;
}

strong,
b {
  font-weight: 700;
}

button,
input,
select,
textarea {
  font: inherit;
}

code {
  font-family: var(--mono);
}
