/* theme.css — the design tokens shared by the app shell (/), /admin and /login.
 *
 * SCOPE: TOKENS ONLY. Custom properties (plus `color-scheme`, which is part of the theme
 * contract) — never component styles. Each page keeps its own components in its inline <style>.
 *
 * WHAT LIVES HERE: a property is shared only when at least two of the three pages define it AND
 * its value is the same in every page that defines it, in BOTH themes. A token whose value differs
 * anywhere stays page-local, in that page's inline <style> — unifying it would restyle a page.
 * Page-local today: --bg-page, --bg-header, --text-muted, --shadow-sm, --shadow-lg, --aurora-opacity,
 * --sidebar-w, --r-lg (plus the single-page tokens each file defines for itself).
 *
 * CASCADE: every page links this file BEFORE its inline <style>. Same selector, same specificity,
 * so a page-local redefinition wins by document order. Keep it that way.
 *
 * The theme switch is unchanged: the pre-paint script sets data-theme on <html> and the
 * :root[data-theme="dark"] block below overrides the light values.
 *
 * NOTE: the Google Fonts @import stays in each page — the three pages request different weight
 * and italic axes, so there is no single shared import line.
 */

:root {
  color-scheme: light dark;

  --bg-primary: #FFFFFF;
  --bg-subtle: #F7F7F9;
  --bg-muted: #F2F2F4;
  --bg-sidebar: #FAFAFB;
  --bg-hover: #F2F2F5;

  --text-primary: #111113;
  --text-body: #3C3C43;
  --text-secondary: #6E6E78;
  --text-faint: #9C9CA6;

  --accent: #7B6CF0;
  --accent-hover: #6A5BE0;
  --accent-soft: rgba(123,108,240,0.07);
  --accent-light: #F0EEFF;
  --accent-ring: rgba(123,108,240,0.35);

  /* brand gradient (used sparingly: send, logo dot, badges, mark) */
  --grad-brand: linear-gradient(135deg, #8E7DF8 0%, #6A5BE0 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(142,125,248,0.16), rgba(106,91,224,0.10));

  /* elevation scale */
  --shadow-xs: 0 1px 2px rgba(17,17,19,0.04);
  --shadow-md: 0 6px 16px rgba(17,17,19,0.07), 0 2px 5px rgba(17,17,19,0.04);

  /* refined contour hairline (chat frame) */
  --edge-line: color-mix(in srgb, var(--border-strong) 68%, var(--accent) 32%);

  /* glass (chrome: header · sidebars · drawers · modal · pill · composer) */
  --glass-panel: rgba(250,250,251,0.63);
  --glass-sheen: rgba(255,255,255,0.7);
  --glass-border: rgba(17,17,19,0.08);

  --color-error: #DC2626;

  --border: #EEEEEF;
  --border-strong: #E0E0E3;

  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;

  --pad: 16px;
  --header-h: 60px;
  --r-sm: 6px; --r: 8px;
}

/* ===== DARK THEME — reference tokens: background #141417, light text, accent #8B7CF6 ===== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary: #141417;
  --bg-subtle: #161619;
  --bg-muted: #202026;
  --bg-sidebar: #111114;
  --bg-hover: #24242B;

  --text-primary: #F5F5F7;
  --text-body: #CDCDD5;
  --text-secondary: #9A9AA6;
  --text-faint: #5A5A64;

  --accent: #8B7CF6;
  --accent-hover: #9C8DFF;
  --accent-soft: rgba(139,124,246,0.15);
  --accent-light: rgba(139,124,246,0.22);
  --accent-ring: rgba(139,124,246,0.45);

  --grad-brand: linear-gradient(135deg, #9D8EFF 0%, #6E5CE6 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(157,142,255,0.20), rgba(110,92,230,0.12));

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);

  --glass-panel: rgba(15,15,19,0.55);
  --glass-sheen: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.10);

  --color-error: #F87171;

  --border: #25252A;
  --border-strong: #34343B;
}
