/* Shared design tokens for dashboard, chat, security, login, and public pages. */
:root {
  color-scheme: dark;
  --coms-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --coms-text-sm: 0.75rem;
  --coms-text-md: 1rem;
  --coms-text-lg: 1.25rem;
  --coms-space-1: 4px;
  --coms-space-2: 8px;
  --coms-space-3: 12px;
  --coms-space-4: 16px;
  --coms-space-5: 24px;
  --coms-space-6: 32px;
  --coms-radius-sm: 8px;
  --coms-radius-md: 12px;
  --coms-radius-lg: 18px;
  --coms-bg: #10161c;
  --coms-panel: #172029;
  --coms-text: #e8eef2;
  --coms-muted: #c5d0d6;
  --coms-subtle: #b7c3c9;
  --coms-line: #2c3a44;
  --coms-accent: #3ecf8e;
  --coms-accent-ink: #06281c;
  --bg: var(--coms-bg);
  --bg-glow: #163028;
  --panel: color-mix(in srgb, var(--coms-panel) 92%, transparent);
  --panel-solid: var(--coms-panel);
  --text: var(--coms-text);
  --ink: var(--coms-text);
  --muted: var(--coms-muted);
  --subtle: var(--coms-subtle);
  --line: var(--coms-line);
  --line-bright: #3c4e5a;
  --mint: var(--coms-accent);
  --mint-strong: #2fbf80;
  --mint-ink: var(--coms-accent-ink);
  --accent: var(--coms-accent);
  --accent-strong: #2fbf80;
  --amber: #f0c36a;
  --warm: #f0c36a;
  --red: #ffb4b4;
  --shadow: 0 22px 80px #00000055;
  font-family: var(--coms-font);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --coms-bg: #10161c;
  --coms-panel: #172029;
  --coms-text: #e8eef2;
  --coms-muted: #c5d0d6;
  --coms-subtle: #b7c3c9;
  --coms-line: #2c3a44;
  --coms-accent: #3ecf8e;
  --coms-accent-ink: #06281c;
  --bg: var(--coms-bg);
  --bg-glow: #163028;
  --panel: color-mix(in srgb, var(--coms-panel) 92%, transparent);
  --panel-solid: var(--coms-panel);
  --text: var(--coms-text);
  --ink: var(--coms-text);
  --muted: var(--coms-muted);
  --subtle: var(--coms-subtle);
  --line: var(--coms-line);
  --mint: var(--coms-accent);
  --accent: var(--coms-accent);
}

html[data-theme="light"] {
  color-scheme: light;
  --coms-bg: #f4f7f4;
  --coms-panel: #ffffff;
  --coms-text: #14201d;
  --coms-muted: #3e524c;
  --coms-subtle: #3e524c;
  --coms-line: #d5e2db;
  --coms-accent: #0f6b4c;
  --coms-accent-ink: #f3fff8;
  --bg: var(--coms-bg);
  --bg-glow: #d9f1e6;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --text: var(--coms-text);
  --ink: var(--coms-text);
  --muted: var(--coms-muted);
  --subtle: var(--coms-subtle);
  --line: var(--coms-line);
  --line-bright: #c5d5ce;
  --mint: var(--coms-accent);
  --mint-strong: #0c5a40;
  --mint-ink: var(--coms-accent-ink);
  --accent: var(--coms-accent);
  --accent-strong: #0c5a40;
  --amber: #8a5a10;
  --warm: #8a5a10;
  --red: #9d2f2f;
  --shadow: 0 22px 70px #173d2c14;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --coms-bg: #f4f7f4;
    --coms-panel: #ffffff;
    --coms-text: #14201d;
    --coms-muted: #3e524c;
    --coms-subtle: #3e524c;
    --coms-accent: #0f6b4c;
    --bg: var(--coms-bg);
    --text: var(--coms-text);
    --ink: var(--coms-text);
    --muted: var(--coms-muted);
    --subtle: var(--coms-subtle);
    --mint: var(--coms-accent);
    --accent: var(--coms-accent);
  }
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --coms-bg: #f4f7f4;
    --coms-panel: #ffffff;
    --coms-text: #14201d;
    --coms-muted: #3e524c;
    --coms-subtle: #3e524c;
    --coms-accent: #0f6b4c;
    --bg: var(--coms-bg);
    --panel: #ffffff;
    --panel-solid: #ffffff;
    --text: var(--coms-text);
    --ink: var(--coms-text);
    --muted: var(--coms-muted);
    --subtle: var(--coms-subtle);
    --mint: var(--coms-accent);
    --accent: var(--coms-accent);
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]),
  html[data-theme="system"] {
    color-scheme: dark;
    --coms-bg: #10161c;
    --coms-panel: #172029;
    --coms-text: #e8eef2;
    --coms-muted: #c5d0d6;
    --coms-subtle: #b7c3c9;
    --coms-accent: #3ecf8e;
    --bg: var(--coms-bg);
    --panel: var(--coms-panel);
    --panel-solid: var(--coms-panel);
    --text: var(--coms-text);
    --ink: var(--coms-text);
    --muted: var(--coms-muted);
    --subtle: var(--coms-subtle);
    --mint: var(--coms-accent);
    --accent: var(--coms-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

:focus-visible {
  outline: 2px solid var(--coms-accent);
  outline-offset: 3px;
}