/* theme.css - Simplified Semantic Palette via OpenProps */

/* 1. Core Fonts */
/* 1. Core Fonts - Loaded via HTML Link in layout.html */

:root {
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-body: "Inter", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* 2. Semantic Palette (Light Mode Default) */
  --bg-body: var(--gray-2); /* Darker backdrop to make cards pop */
  --bg-surface: var(--gray-1); /* Slight gray for sidebar to separate */
  --bg-surface-alt: var(--gray-2);
  --text-main: var(--gray-12);
  --text-muted: var(--gray-7);
  --text-muted: var(--gray-7);
  --text-inverted: var(--white);
  
  /* Global Design Tokens */
  --radius-panel: var(--radius-4); /* Standardized Panel Roundness */
  --font-panel: 0.95rem; /* Standardized Panel Text Size */

  /* Chunky Pop Borders */
  /* Chunky Pop Borders */
  --border: var(--indigo-7); /* Visible Indigo, not black! */
  --border-width: 3px; /* Extra Thick/Cartoonish */
  --border-hover: var(--pink-5); /* Bright Pop on Hover */

  /* Brand / Action */
  --primary: var(--indigo-6);
  --primary-hover: var(--indigo-7);
  --on-primary: var(--white);
  --accent: var(--pink-5);
  --on-accent: var(--white);
  --color-on-accent: var(--on-accent);

  /* Status Colors */
  --success: var(--green-6);
  --warning: var(--yellow-6);
  --danger: var(--red-6);

  /* Glass/Veil Effects */
  --veil: #0000000d;
  --bg-overlay: rgb(0 0 0 / 75%); /* Semantic Overlay */
  --glass-bg: rgb(255 255 255 / 70%);
  --glass-border: var(--gray-3);

  /* Layout Areas (Light) - Cartoonish/Fresh Tints */
  --bg-header: var(--grape-0); /* Tinted Header */
  --bg-sidebar: var(--blue-0); /* Tinted Sidebar */
  --bg-main: var(--gray-0); /* Clean Main */
  --bg-footer: var(--orange-0); /* Distinct Footer */
  --bg-composer: var(--gray-0);
  --bg-panel: var(--bg-surface); /* Unified Panel Background */
  --bg-status-bar: var(--gray-1);
  /* Chat Bubbles (Light) */
  --bg-bubble-self: var(--indigo-0);
  --border-bubble-self: var(--indigo-3);
  --bg-bubble-peer: var(--pink-0);
  --border-bubble-peer: var(--pink-3);
  --bg-bubble-system: var(--red-0);
  --border-bubble-system: var(--red-11);

  /* Peer Themes (6 distinct colors) */
  --peer-theme-1-bg: var(--teal-0);
  --peer-theme-1-border: var(--teal-4);
  --peer-theme-2-bg: var(--cyan-0);
  --peer-theme-2-border: var(--cyan-4);
  --peer-theme-3-bg: var(--lime-0);
  --peer-theme-3-border: var(--lime-5);
  --peer-theme-4-bg: var(--amber-0);
  --peer-theme-4-border: var(--amber-5);
  --peer-theme-5-bg: var(--orange-0);
  --peer-theme-5-border: var(--orange-4);
  --peer-theme-6-bg: var(--pink-0);
  --peer-theme-6-border: var(--pink-4);
}

/* 3. Dark Mode Override */
:root[data-theme="dark"] {
  /* Dark Theme */
  --bg-body: var(--gray-12); /* Deepest Black for backdrop */
  --bg-surface: var(--gray-11);
  --bg-surface-alt: var(--gray-10);

  /* Layout Areas (Dark) - Distinct Deep Tints */
  --bg-header: var(--grape-11);
  --bg-sidebar: var(--blue-11);
  --bg-main: var(--gray-11);
  --bg-footer: var(--orange-11);
  --bg-composer: var(--gray-11);
  --bg-status-bar: var(--gray-10); /* Subtle contrast */
  /* Chat Bubbles (Dark) */
  --bg-bubble-self: var(--indigo-11);
  --border-bubble-self: var(--indigo-8);
  --bg-bubble-peer: var(--pink-11);
  --border-bubble-peer: var(--pink-8);
  --bg-bubble-system: var(--red-11);
  --border-bubble-system: var(--red-8);

  /* Peer Themes (Dark) */
  --peer-theme-1-bg: var(--teal-11);
  --peer-theme-1-border: var(--teal-7);
  --peer-theme-2-bg: var(--cyan-11);
  --peer-theme-2-border: var(--cyan-7);
  --peer-theme-3-bg: var(--lime-11);
  --peer-theme-3-border: var(--lime-7);
  --peer-theme-4-bg: var(--amber-11);
  --peer-theme-4-border: var(--amber-7);
  --peer-theme-5-bg: var(--orange-11);
  --peer-theme-5-border: var(--orange-7);
  --peer-theme-6-bg: var(--pink-11);
  --peer-theme-6-border: var(--pink-7);
  --text-main: var(--gray-0);
  --text-muted: var(--gray-4);
  --text-inverted: var(--gray-12);
  --border: var(--gray-8);
  --border-hover: var(--gray-7);
  --primary: var(--indigo-5);
  --primary-hover: var(--indigo-4);
  --on-primary: var(--white);
  --accent: var(--pink-5);
  --on-accent: var(--white);
  --color-on-accent: var(--on-accent);
  --glass-bg: rgb(0 0 0 / 40%);
  --glass-border: var(--gray-8);
}

:root {
  /* Layering (Z-Index) */
  --layer-base: 1; /* Standard content stacking (if needed) */
  /* Layout panes (Header, Sidebar, Main) are Grid items and do not need Z-Index */

  --layer-panel: 50; /* Slide-outs, Dropdowns, Tooltips */
  --layer-modal: 100; /* Overlays, Modals */
  --layer-critical: 9999; /* Toasts, Progress */
}

/* 4. Global Resets/Utilities */
body {
  background-color: var(--bg-body);
  color: var(--text-main);
  font-family: var(--font-body);
  
}

h1,
h2,
h3,
h4 {
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Scrollbar Polish */
::-webkit-scrollbar {
  width: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-8);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-6);
}