/* OWO foundations shared by the public site, authentication and cabinet. */
:root {
  color-scheme: light;
  --navy: #0b1f3b;
  --blue: #1c4ed8;
  --cyan: #38cfff;
  --ink: #0b1f3b;
  --mut: #526580;
  --muted: #526580;
  --line: #e2e8f0;
  --bg: #f5f9ff;
  --card: #fff;
  --ok: #15803d;
  --warn: #a35c00;
  --bad: #b91c1c;
  --purple: #8b5cf6;
  --r: 18px;
  --accent: #1c4ed8;          /* solid fills under white text (buttons, user messages) */
  --accent-hover: #163fb0;
  --surface-2: #f5f9ff;       /* raised / hovered rows, table heads */
  --field: #fff;              /* form field background */
  --field-line: #c7d6e8;
  --brand-gradient: linear-gradient(115deg, #0755ff, #38cfff);
  --ai-gradient: linear-gradient(115deg, #7040ec, #b69aff);
  --surface-gradient: linear-gradient(135deg, #fff, #e6f6ff);
  --shadow: 0 8px 28px #1c4ed80a;
  --focus: 0 0 0 4px #1c4ed824;
}

/*
 * Dark theme. data-theme is set on <html> by /assets/js/theme.js before first paint
 * (light / dark / system → prefers-color-scheme). Component overrides: theme.css.
 * --blue is lightened for text and links; solid fills use --accent so white text keeps AA contrast.
 */
:root[data-theme=dark] {
  color-scheme: dark;
  --ink: #e6edf8;
  --mut: #9db0c9;
  --muted: #9db0c9;
  --line: #24344d;
  --bg: #0a1322;
  --card: #111c2f;
  --blue: #7aa5ff;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --purple: #a78bfa;
  --accent: #2c5fe0;
  --accent-hover: #3d6ff0;
  --surface-2: #16243b;
  --field: #0e1828;
  --field-line: #2c3e5a;
  --surface-gradient: linear-gradient(135deg, #13213a, #0f2a44);
  --shadow: 0 8px 28px #0000004d;
  --focus: 0 0 0 4px #7aa5ff40;
}