/* Design tokens — same palette as the extension (src/shared/tokens.css) so the site and
   the product read as one brand. Light via :root, dark via [data-theme="dark"]. */
:root {
  --color-primary: #1683f7;
  --color-primary-hover: #0d72e5;
  --color-primary-pressed: #0964c7;
  --color-primary-contrast: #ffffff;
  --color-link: #0a66c2; /* primary darkened for AA contrast on light backgrounds */
  --color-border: #dce6f0;
  --color-text-secondary: #526277;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-secondary: #f1f5f9;
  --color-accent-surface: #eaf4ff;
  --color-text: #172b4d;
  --color-text-muted: #64748b;
  --color-success-bg: #ecfdf3;
  --color-success-text: #15803d;
  --color-error-bg: #fef2f2;
  --color-error-text: #b91c1c;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
  --shadow-md: 0 8px 24px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 6%);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --focus-ring: 0 0 0 3px rgb(22 131 247 / 35%);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --color-primary: #5aa9ff;
  --color-primary-hover: #78baff;
  --color-primary-pressed: #3d91e8;
  --color-primary-contrast: #0f172a;
  --color-link: #7fbcff;
  --color-border: #2a3a52;
  --color-text-secondary: #a8b5c7;
  --color-bg: #0b1220;
  --color-surface: #131c2e;
  --color-surface-secondary: #1c2940;
  --color-accent-surface: #16304f;
  --color-text: #f1f5f9;
  --color-text-muted: #8493a8;
  --color-success-bg: #052e16;
  --color-success-text: #86efac;
  --color-error-bg: #3b1212;
  --color-error-text: #fca5a5;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
  --focus-ring: 0 0 0 3px rgb(90 169 255 / 40%);
  color-scheme: dark;
}