/* PatentAI design tokens. Light palette on :root; dark palette for the OS setting (unless the
   viewer chose light) and again for an explicit dark choice, so the toggle wins both ways.
   Components use only these tokens. Neutrals lean slightly blue (ink of a patent gazette). */
:root {
  color-scheme: light;

  /* surfaces */
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #e8edf2;
  --line: #d8dfe6;
  --line-strong: #b9c4cf;

  /* text */
  --ink: #142231;
  --ink-2: #445466;
  --muted: #5b6b7c;

  /* accent (links, primary actions, focus) */
  --accent: #1d5ea8;
  --accent-hover: #164b88;
  --accent-soft: #e6eef8;
  --accent-ink: #ffffff;
  --focus: #1d5ea8;

  /* sidebar */
  --nav-bg: #0f2233;
  --nav-ink: #c3d0dc;
  --nav-ink-strong: #ffffff;
  --nav-active: #1e3a55;
  --nav-line: #1f3447;

  /* semantic status (text on the matching -bg passes 4.5:1) */
  --ok: #17693a;
  --ok-bg: #e1f2e7;
  --warn: #7d4b00;
  --warn-bg: #fcefd2;
  --bad: #a8231c;
  --bad-bg: #fbe3e1;
  --info: #1d5ea8;
  --info-bg: #e6eef8;
  --killed: #ffffff;
  --killed-bg: #6b1410;

  /* charts (graphics: >= 3:1 against the surface) */
  --chart-1: #2a78d6;
  --chart-2: #d65a24;
  --chart-ok: #1e8a44;
  --chart-warn: #c98500;
  --chart-bad: #d03b3b;
  --chart-track: #e3e9ef;
  --chart-grid: #e3e9ef;
  --chart-axis: #b9c4cf;

  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;
  --lh: 1.5;
  --lh-tight: 1.2;

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* shape */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(15, 34, 51, 0.06), 0 1px 1px rgba(15, 34, 51, 0.04);
  --sh-2: 0 6px 20px rgba(15, 34, 51, 0.1);
  --sh-3: 0 24px 56px rgba(8, 18, 28, 0.28);

  /* layout */
  --sidebar-w: 236px;
  --content-max: 1180px;

  /* theme-dependent visibility (icons of the theme toggle) */
  --show-light: inline-block;
  --show-dark: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c131a;
    --surface: #131c25;
    --surface-2: #17222d;
    --surface-3: #1f2c39;
    --line: #26343f;
    --line-strong: #3a4b5a;
    --ink: #e4ebf1;
    --ink-2: #b3c0cc;
    --muted: #93a2b0;
    --accent: #72abf0;
    --accent-hover: #93c0f5;
    --accent-soft: #15304d;
    --accent-ink: #0a1622;
    --focus: #93c0f5;
    --nav-bg: #09111a;
    --nav-ink: #a8b7c5;
    --nav-ink-strong: #ffffff;
    --nav-active: #172a3d;
    --nav-line: #17232f;
    --ok: #74d39c;
    --ok-bg: #11301f;
    --warn: #f0c066;
    --warn-bg: #362a0e;
    --bad: #ff948b;
    --bad-bg: #3d1715;
    --info: #93c0f5;
    --info-bg: #15304d;
    --killed: #ffffff;
    --killed-bg: #8c1a12;
    --chart-1: #3987e5;
    --chart-2: #e0703c;
    --chart-ok: #2fb45a;
    --chart-warn: #e0a020;
    --chart-bad: #e66767;
    --chart-track: #22303d;
    --chart-grid: #22303d;
    --chart-axis: #3a4b5a;
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 6px 20px rgba(0, 0, 0, 0.45);
    --sh-3: 0 24px 56px rgba(0, 0, 0, 0.6);
    --show-light: none;
    --show-dark: inline-block;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c131a;
  --surface: #131c25;
  --surface-2: #17222d;
  --surface-3: #1f2c39;
  --line: #26343f;
  --line-strong: #3a4b5a;
  --ink: #e4ebf1;
  --ink-2: #b3c0cc;
  --muted: #93a2b0;
  --accent: #72abf0;
  --accent-hover: #93c0f5;
  --accent-soft: #15304d;
  --accent-ink: #0a1622;
  --focus: #93c0f5;
  --nav-bg: #09111a;
  --nav-ink: #a8b7c5;
  --nav-ink-strong: #ffffff;
  --nav-active: #172a3d;
  --nav-line: #17232f;
  --ok: #74d39c;
  --ok-bg: #11301f;
  --warn: #f0c066;
  --warn-bg: #362a0e;
  --bad: #ff948b;
  --bad-bg: #3d1715;
  --info: #93c0f5;
  --info-bg: #15304d;
  --killed: #ffffff;
  --killed-bg: #8c1a12;
  --chart-1: #3987e5;
  --chart-2: #e0703c;
  --chart-ok: #2fb45a;
  --chart-warn: #e0a020;
  --chart-bad: #e66767;
  --chart-track: #22303d;
  --chart-grid: #22303d;
  --chart-axis: #3a4b5a;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --sh-3: 0 24px 56px rgba(0, 0, 0, 0.6);
  --show-light: none;
  --show-dark: inline-block;
}