/* Chater admin — design tokens (light + dark) */

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

  --canvas: #fbfbfa;
  --surface-1: #ffffff;
  --surface-2: #f4f3f0;
  --surface-3: #ebeae6;
  --border: rgba(17, 17, 19, 0.08);
  --border-strong: rgba(17, 17, 19, 0.14);
  --text: #111113;
  --text-secondary: #3f3f46;
  --muted: #71717a;
  --accent: #4f5bd5;
  --accent-hover: #434db8;
  --accent-subtle: rgba(79, 91, 213, 0.12);
  --accent-fg: #ffffff;
  --accent-muted: #e8eafd;

  --ok: #2d6a3e;
  --ok-bg: #edf3ec;
  --warn: #956400;
  --warn-bg: #fbf3db;
  --danger: #9f2f2d;
  --danger-bg: #fdebec;

  --shadow-sm: 0 1px 2px rgba(17, 17, 19, 0.05);
  --shadow-md: 0 8px 24px rgba(17, 17, 19, 0.07);
  --shadow-lg: 0 16px 48px rgba(17, 17, 19, 0.1);

  --chart-line: #4f5bd5;
  --chart-fill-start: rgba(79, 91, 213, 0.22);
  --chart-fill-end: rgba(79, 91, 213, 0.02);
  --chart-grid: rgba(17, 17, 19, 0.06);

  /* Light shell: sidebar matches canvas (Linear-style), not dark dock */
  --sidebar-rail: #f4f3f0;
  --sidebar-rail-border: var(--border);
  --sidebar-rail-fg: var(--text);
  --sidebar-rail-muted: var(--muted);
  --sidebar-rail-circle: var(--surface-1);
  --sidebar-rail-circle-hover: var(--surface-3);
  --sidebar-panel: var(--surface-1);
  --sidebar-panel-border: var(--border);
  --sidebar-panel-fg: var(--text);
  --sidebar-panel-muted: var(--muted);
  --sidebar-panel-hover: var(--surface-2);
  --sidebar-panel-active-bg: var(--accent-subtle);
  --sidebar-nav-active-fg: var(--accent-hover);
  --sidebar-nav-active-bar: var(--accent);
  --sidebar-rail-shadow: none;
  --sidebar-panel-shadow: 1px 0 0 var(--border);

  --bubble-user-bg: #e8eafd;
  --bubble-user-border: rgba(79, 91, 213, 0.22);
  --bubble-assistant-bg: var(--surface-1);
  --bubble-assistant-border: var(--border-strong);
  --timeline-inset: var(--surface-2);

  --topbar-bg: rgba(251, 251, 250, 0.88);
  --topbar-border: var(--border);
  --focus-ring: 0 0 0 3px rgba(79, 91, 213, 0.28);

  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-squircle: 11px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 380ms;

  /* Legacy aliases */
  --bg: var(--canvas);
  --content-bg: var(--canvas);
  --bg-elevated: var(--surface-1);
  --card: var(--surface-1);
  --card-hover: var(--surface-2);
  --accent-bright: var(--accent-hover);
  --accent-dim: var(--accent-subtle);
  --nav-active-bg: var(--accent-subtle);
  --glass-bg: var(--surface-1);
  --glass-bg-hover: var(--surface-2);
  --glass-bg-active: var(--surface-3);
  --glass-border: var(--border);
  --glass-border-hover: var(--border-strong);
  --glass-blur: 0px;
  --glass-shadow: var(--shadow-sm);
}

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

  --canvas: #111113;
  --surface-1: #1a1a1d;
  --surface-2: #222226;
  --surface-3: #2a2a2f;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #ececef;
  --text-secondary: #c4c4cc;
  --muted: #9b9ba3;
  --accent: #7b86e8;
  --accent-hover: #929bf0;
  --accent-subtle: rgba(123, 134, 232, 0.18);
  --accent-fg: #111113;
  --accent-muted: #2a2d42;

  --ok: #86c79a;
  --ok-bg: rgba(45, 106, 62, 0.22);
  --warn: #e8c468;
  --warn-bg: rgba(149, 100, 0, 0.2);
  --danger: #f0a8a6;
  --danger-bg: rgba(159, 47, 45, 0.22);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.55);

  --chart-line: #7b86e8;
  --chart-fill-start: rgba(123, 134, 232, 0.28);
  --chart-fill-end: rgba(123, 134, 232, 0.02);
  --chart-grid: rgba(255, 255, 255, 0.06);

  --sidebar-rail: #0e0e10;
  --sidebar-rail-border: #2a2a2e;
  --sidebar-rail-fg: #ececef;
  --sidebar-rail-muted: #9b9ba3;
  --sidebar-rail-circle: #1a1a1d;
  --sidebar-rail-circle-hover: #28282d;
  --sidebar-panel: #141416;
  --sidebar-panel-border: #2e2e33;
  --sidebar-panel-fg: #ececef;
  --sidebar-panel-muted: #a1a1aa;
  --sidebar-panel-hover: #222226;
  --sidebar-panel-active-bg: rgba(123, 134, 232, 0.2);
  --sidebar-nav-active-fg: #c7cff9;
  --sidebar-nav-active-bar: #7b86e8;
  --sidebar-rail-shadow: none;
  --sidebar-panel-shadow: 1px 0 0 var(--border);

  --bubble-user-bg: rgba(123, 134, 232, 0.2);
  --bubble-user-border: rgba(123, 134, 232, 0.35);
  --bubble-assistant-bg: var(--surface-2);
  --bubble-assistant-border: var(--border-strong);
  --timeline-inset: #0e0e10;

  --topbar-bg: rgba(17, 17, 19, 0.9);
  --topbar-border: var(--border);
  --focus-ring: 0 0 0 3px rgba(123, 134, 232, 0.35);

  --bg: var(--canvas);
  --content-bg: var(--canvas);
  --bg-elevated: var(--surface-1);
  --card: var(--surface-1);
  --card-hover: var(--surface-2);
  --accent-bright: var(--accent-hover);
  --accent-dim: var(--accent-subtle);
  --nav-active-bg: var(--accent-subtle);
  --glass-bg: var(--surface-1);
  --glass-bg-hover: var(--surface-2);
  --glass-bg-active: var(--surface-3);
  --glass-border: var(--border);
  --glass-border-hover: var(--border-strong);
  --glass-shadow: var(--shadow-sm);
}

:root {
  --scrollbar-size: 8px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(113, 113, 122, 0.35);
  --scrollbar-thumb-hover: rgba(79, 91, 213, 0.45);
  --scrollbar-thumb-active: rgba(79, 91, 213, 0.55);

  --sidebar-w: 292px;
  --sidebar-rail-w: 64px;
  --sidebar-panel-w: calc(var(--sidebar-w) - var(--sidebar-rail-w));
  --sidebar-top-pad: 1rem;
  --sidebar-head-pad-y: 0.85rem;
  --sidebar-name-size: 0.95rem;
  --sidebar-name-lh: 1.35;
  --sidebar-status-gap: 0.2rem;
  --sidebar-status-size: 0.75rem;
  --sidebar-status-lh: 1.35;
  --sidebar-panel-head-border: 1px;
  --sidebar-panel-head-height: calc(
    var(--sidebar-top-pad) +
    var(--sidebar-name-size) * var(--sidebar-name-lh) +
    var(--sidebar-status-gap) +
    var(--sidebar-status-size) * var(--sidebar-status-lh) +
    var(--sidebar-head-pad-y) +
    var(--sidebar-panel-head-border)
  );
  --sidebar-nav-start: calc(
    var(--sidebar-top-pad) +
    var(--sidebar-name-size) * var(--sidebar-name-lh) +
    var(--sidebar-status-gap) +
    var(--sidebar-status-size) * var(--sidebar-status-lh) +
    var(--sidebar-head-pad-y) +
    var(--sidebar-panel-head-border) +
    var(--sidebar-head-pad-y)
  );
}

[data-theme="dark"] {
  --scrollbar-thumb: rgba(155, 155, 163, 0.35);
  --scrollbar-thumb-hover: rgba(123, 134, 232, 0.5);
  --scrollbar-thumb-active: rgba(123, 134, 232, 0.65);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}