/* Color tokens for the signed-in app. Dark is the default; an account that
   chose Light on /account renders <html data-theme="light"> (see the `theme`
   context processor in app.py) and gets the second block. Marketing pages,
   capture (always black) and the zip export do not link this file.
   Component styles use only these tokens -- no literal colors. */
:root {
  color-scheme: dark;
  --bg: #0f1117;
  --card: #1a1d26;
  --surface-2: #242836;
  --text: #e8e9ee;
  --text-2: #b4b8c4;
  --muted: #9298a6;
  --faint: #6b7180;
  --line: #2c3140;
  --line-strong: #3a4050;
  --primary: #8b5cf6;
  --primary-dark: #6d28d9;
  --primary-text: #c4b5fd;
  --primary-tint: #2a2340;
  --primary-tint-2: #352a52;
  --primary-line: #4c3d7a;
  --danger: #f87171;
  --success: #22c55e;
  --warn-bg: #4a3f10;
  --inverse-bg: #e8e9ee;
  --inverse-text: #111827;
  --scrim: rgba(0, 0, 0, 0.6);
  --flash-error-bg: #3b1a1d; --flash-error-text: #fca5a5;
  --flash-success-bg: #14321f; --flash-success-text: #86efac;
  --flash-info-bg: #15283f; --flash-info-text: #93c5fd;
  --offline-bg: #ff6b6b;
  --offline-text: #ffffff;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f8;
  --card: #ffffff;
  --surface-2: #f0f2f5;
  --text: #111827;
  --text-2: #4b5563;
  --muted: #6b7280;
  --faint: #9ca3af;
  --line: #ececf1;
  --line-strong: #d5d9e0;
  --primary: #6d28d9;
  --primary-dark: #4c1d95;
  --primary-text: #4c1d95;
  --primary-tint: #f5f3ff;
  --primary-tint-2: #ede9fe;
  --primary-line: #ddd6fe;
  --danger: #dc2626;
  --success: #16a34a;
  --warn-bg: #fff3b0;
  --inverse-bg: #111827;
  --inverse-text: #ffffff;
  --scrim: rgba(17, 24, 39, 0.45);
  --flash-error-bg: #ffebe9; --flash-error-text: #cf222e;
  --flash-success-bg: #dafbe1; --flash-success-text: #1a7f37;
  --flash-info-bg: #ddf4ff; --flash-info-text: #0969da;
  --offline-bg: #ff6b6b;
  --offline-text: #ffffff;
}

/* Older names still used across the stylesheets, resolved to the tokens
   above so both themes reach them. */
:root {
  --primary-color: var(--primary);
  --secondary-color: var(--text);
  --background-color: var(--bg);
  --text-color: var(--text);
  --muted-color: var(--muted);
  --line-color: var(--line);
  --danger-color: var(--danger);
  --violet: var(--primary);
  --violet-dark: var(--primary-dark);
  --ink: var(--text);
}