/* === Strato Theme — CSS Custom Properties === */

:root {
  /* Light mode (default) */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F5;
  --bg-tertiary: #EEEEEE;
  --text-primary: #000000;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --accent: #000000;
  --accent-text: #FFFFFF;
  --accent-hover: #333333;
  --bubble-self: #000000;
  --bubble-self-text: #FFFFFF;
  --bubble-other: #F0F0F0;
  --bubble-other-text: #000000;
  --border: #E0E0E0;
  --border-light: #F0F0F0;
  --hover: rgba(0, 0, 0, 0.05);
  --hover-strong: rgba(0, 0, 0, 0.10);
  --danger: #CC0000;
  --danger-hover: #AA0000;
  --success: #00AA00;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --transition: 200ms ease;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --sidebar-width: 60px;
  --session-list-width: 280px;
}

[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1E1E1E;
  --bg-tertiary: #2A2A2A;
  --text-primary: #FFFFFF;
  --text-secondary: #AAAAAA;
  --text-tertiary: #777777;
  --accent: #FFFFFF;
  --accent-text: #000000;
  --accent-hover: #DDDDDD;
  --bubble-self: #FFFFFF;
  --bubble-self-text: #000000;
  --bubble-other: #2A2A2A;
  --bubble-other-text: #FFFFFF;
  --border: #333333;
  --border-light: #2A2A2A;
  --hover: rgba(255, 255, 255, 0.05);
  --hover-strong: rgba(255, 255, 255, 0.10);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40);
}

/* === Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; }
img { max-width: 100%; display: block; }
input, textarea { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

.hidden { display: none !important; }