/* Validator color tokens — the single source for every color in the app.
 *
 * Use them two ways:
 *   - Tailwind classes:  text-ink, text-muted, bg-subtle, border-line, bg-brand,
 *                        text-good, bg-bad-bg, bg-moss-500, text-ink-400 ...
 *                        (mapped in /assets/js/tailwind.config.js)
 *   - CSS / inline style: color: var(--muted); background: var(--good-bg);
 *
 * Never write a hex color in a view or script — add or reuse a token here.
 * Dark mode later = one more block that redefines these variables.
 */
:root {
  /* Neutral scale (soft green-gray). Tailwind: ink-50 ... ink-950 */
  --n-50:  #f4f6f4;
  --n-100: #e6e9e6;
  --n-200: #d3d9d4;
  --n-300: #b7c0b9;
  --n-400: #8a938c;
  --n-500: #6b736e;
  --n-600: #4b544e;
  --n-700: #3d4741;
  --n-800: #1f2a24;
  --n-900: #0d1210;
  --n-950: #060c09;

  /* Green scale = Tailwind green; 500 is the logo green. Tailwind: moss-50 ... moss-900 */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #052e16;

  /* Other Tailwind palettes (status chips, badges, alerts). Same values as
     Tailwind's defaults; dark mode below swaps them for dark-friendly ones. */
  --red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-300:#fca5a5; --red-400:#f87171; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c; --red-800:#991b1b; --red-900:#7f1d1d; --red-950:#450a0a;
  --orange-50:#fff7ed; --orange-100:#ffedd5; --orange-200:#fed7aa; --orange-300:#fdba74; --orange-400:#fb923c; --orange-500:#f97316; --orange-600:#ea580c; --orange-700:#c2410c; --orange-800:#9a3412; --orange-900:#7c2d12; --orange-950:#431407;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309; --amber-800:#92400e; --amber-900:#78350f; --amber-950:#451a03;
  --yellow-50:#fefce8; --yellow-100:#fef9c3; --yellow-200:#fef08a; --yellow-300:#fde047; --yellow-400:#facc15; --yellow-500:#eab308; --yellow-600:#ca8a04; --yellow-700:#a16207; --yellow-800:#854d0e; --yellow-900:#713f12; --yellow-950:#422006;
  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-200:#a7f3d0; --emerald-300:#6ee7b7; --emerald-400:#34d399; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857; --emerald-800:#065f46; --emerald-900:#064e3b; --emerald-950:#022c22;
  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-200:#99f6e4; --teal-300:#5eead4; --teal-400:#2dd4bf; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e; --teal-800:#115e59; --teal-900:#134e4a; --teal-950:#042f2e;
  --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-200:#bae6fd; --sky-300:#7dd3fc; --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#0369a1; --sky-800:#075985; --sky-900:#0c4a6e; --sky-950:#082f49;
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd; --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af; --blue-900:#1e3a8a; --blue-950:#172554;
  --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-200:#c7d2fe; --indigo-300:#a5b4fc; --indigo-400:#818cf8; --indigo-500:#6366f1; --indigo-600:#4f46e5; --indigo-700:#4338ca; --indigo-800:#3730a3; --indigo-900:#312e81; --indigo-950:#1e1b4b;
  --violet-50:#f5f3ff; --violet-100:#ede9fe; --violet-200:#ddd6fe; --violet-300:#c4b5fd; --violet-400:#a78bfa; --violet-500:#8b5cf6; --violet-600:#7c3aed; --violet-700:#6d28d9; --violet-800:#5b21b6; --violet-900:#4c1d95; --violet-950:#2e1065;
  --purple-50:#faf5ff; --purple-100:#f3e8ff; --purple-200:#e9d5ff; --purple-300:#d8b4fe; --purple-400:#c084fc; --purple-500:#a855f7; --purple-600:#9333ea; --purple-700:#7e22ce; --purple-800:#6b21a8; --purple-900:#581c87; --purple-950:#3b0764;
  --pink-50:#fdf2f8; --pink-100:#fce7f3; --pink-200:#fbcfe8; --pink-300:#f9a8d4; --pink-400:#f472b6; --pink-500:#ec4899; --pink-600:#db2777; --pink-700:#be185d; --pink-800:#9d174d; --pink-900:#831843; --pink-950:#500724;
  --rose-50:#fff1f2; --rose-100:#ffe4e6; --rose-200:#fecdd3; --rose-300:#fda4af; --rose-400:#fb7185; --rose-500:#f43f5e; --rose-600:#e11d48; --rose-700:#be123c; --rose-800:#9f1239; --rose-900:#881337; --rose-950:#4c0519;

  /* Surfaces and lines */
  --bg: #ffffff;                  /* page background */
  --surface: #ffffff;             /* cards, menus, panels, inputs */
  --subtle: #f7f8f7;              /* light panel / row fill */
  --line: #eceeec;                /* hairline dividers */
  --line-strong: var(--n-100);    /* card, header and section borders */
  --border: var(--n-200);         /* input and button borders */

  /* Text */
  --ink: var(--n-900);            /* primary text, dark buttons */
  --ink-soft: var(--n-600);       /* secondary text */
  --muted: var(--n-500);          /* meta text, labels (4.9:1 on white) */
  --faint: var(--n-400);          /* placeholders, icons, non-essential hints */
  --on-color: #ffffff;            /* text on brand, ink or status fills */

  /* Brand (logo green) */
  --accent: var(--green-500);     /* logo dot, positive dots and fills. Never text on white */
  --brand: var(--green-700);      /* links, primary buttons, focus ring (white text 5:1) */
  --brand-hover: var(--green-800);

  /* Status */
  --good: var(--green-700);
  --good-bg: var(--green-50);
  --good-line: var(--green-200);
  --mid: #c33300;                 /* needs attention (scores 50-89) */
  --mid-bg: #fff6e5;
  --mid-line: #fde68a;
  --warn: #f59e0b;                /* warning dot or bar, always paired with a word */
  --bad: #cc0000;                 /* failing / down */
  --bad-bg: #ffeeed;
  --bad-line: #fecaca;
  --crit: #dc2626;                /* critical dot or bar */

  /* Info (blue) — e.g. POST method badge in API docs */
  --info: #1d4ed8;
  --info-bg: #e6edfd;

  /* Code panel (API docs) — always dark */
  --code-bg: #0d1210;
  --code-line: #1d2621;
  --code-ink: #d7e0da;
  --code-hi: #e9efeb;
  --code-dim: #7d8a82;
  --code-com: #6b7a71;
  --code-str: #a5e3b8;
  --code-key: #93c5fd;
  --code-num: #fbbf77;
  --code-kw: #f0a3c8;
  --code-flag: #c4b5fd;
  --code-var: #fcd98a;
  --code-ok: var(--green-400);

  /* Other */
  --card-shadow: 0 1px 2px rgba(13,18,16,.05), 0 2px 8px rgba(13,18,16,.04);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
 * Dark theme. Turned on by <html data-theme="dark"> (set by the theme switch
 * in the account menu, see views/layout.ejs). Public report pages never set
 * it, so they always stay light.
 * Neutrals are inverted (ink-50 = darkest fill, ink-900 = lightest text).
 * Color palettes: 50-300 become dark tints, 400-600 stay, 700-950 become
 * the light shades, so "bg-red-50 text-red-700" chips keep working.
 * ------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --n-50:  #19211d;
  --n-100: #222b26;
  --n-200: #313b35;
  --n-300: #4a554e;
  --n-400: #7a857e;
  --n-500: #98a29b;
  --n-600: #b6bfb9;
  --n-700: #ccd3ce;
  --n-800: #e0e6e2;
  --n-900: #eef2ef;
  --n-950: #f7f9f8;

  --green-50:#0e2517; --green-100:#0f301c; --green-200:#124625; --green-300:#2e814c; --green-400:#4ade80; --green-500:#22c55e; --green-600:#16a34a; --green-700:#4ade80; --green-800:#86efac; --green-900:#bbf7d0; --green-950:#dcfce7;
  --red-50:#261514; --red-100:#341917; --red-200:#4f1f1e; --red-300:#8d4544; --red-400:#f87171; --red-500:#ef4444; --red-600:#dc2626; --red-700:#f87171; --red-800:#fca5a5; --red-900:#fecaca; --red-950:#fee2e2;
  --orange-50:#281b0e; --orange-100:#36210f; --orange-200:#522d10; --orange-300:#8f5727; --orange-400:#fb923c; --orange-500:#f97316; --orange-600:#ea580c; --orange-700:#fb923c; --orange-800:#fdba74; --orange-900:#fed7aa; --orange-950:#ffedd5;
  --amber-50:#27200d; --amber-100:#35290d; --amber-200:#513a0c; --amber-300:#8f701a; --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#fbbf24; --amber-800:#fcd34d; --amber-900:#fde68a; --amber-950:#fef3c7;
  --yellow-50:#26230c; --yellow-100:#332d0c; --yellow-200:#4e400c; --yellow-300:#8e7711; --yellow-400:#facc15; --yellow-500:#eab308; --yellow-600:#ca8a04; --yellow-700:#facc15; --yellow-800:#fde047; --yellow-900:#fef08a; --yellow-950:#fef9c3;
  --emerald-50:#0c231b; --emerald-100:#0c2e22; --emerald-200:#0d4230; --emerald-300:#227b5a; --emerald-400:#34d399; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#34d399; --emerald-800:#6ee7b7; --emerald-900:#a7f3d0; --emerald-950:#d1fae5;
  --teal-50:#0c231f; --teal-100:#0d2d29; --teal-200:#0e423b; --teal-300:#1e7b6f; --teal-400:#2dd4bf; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#2dd4bf; --teal-800:#5eead4; --teal-900:#99f6e4; --teal-950:#ccfbf1;
  --sky-50:#0b2127; --sky-100:#0c2a35; --sky-200:#0c3c4f; --sky-300:#246f8e; --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#38bdf8; --sky-800:#7dd3fc; --sky-900:#bae6fd; --sky-950:#e0f2fe;
  --blue-50:#111d29; --blue-100:#142437; --blue-200:#193253; --blue-300:#3a628f; --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#60a5fa; --blue-800:#93c5fd; --blue-900:#bfdbfe; --blue-950:#dbeafe;
  --indigo-50:#161928; --indigo-100:#1b1f36; --indigo-200:#252951; --indigo-300:#4c548e; --indigo-400:#818cf8; --indigo-500:#6366f1; --indigo-600:#4f46e5; --indigo-700:#818cf8; --indigo-800:#a5b4fc; --indigo-900:#c7d2fe; --indigo-950:#e0e7ff;
  --violet-50:#1a1829; --violet-100:#221d37; --violet-200:#312653; --violet-300:#61538f; --violet-400:#a78bfa; --violet-500:#8b5cf6; --violet-600:#7c3aed; --violet-700:#a78bfa; --violet-800:#c4b5fd; --violet-900:#ddd6fe; --violet-950:#ede9fe;
  --purple-50:#1e1729; --purple-100:#271c37; --purple-200:#3a2453; --purple-300:#6f4f90; --purple-400:#c084fc; --purple-500:#a855f7; --purple-600:#9333ea; --purple-700:#c084fc; --purple-800:#d8b4fe; --purple-900:#e9d5ff; --purple-950:#f3e8ff;
  --pink-50:#26161e; --pink-100:#341926; --pink-200:#4f2037; --pink-300:#8b456a; --pink-400:#f472b6; --pink-500:#ec4899; --pink-600:#db2777; --pink-700:#f472b6; --pink-800:#f9a8d4; --pink-900:#fbcfe8; --pink-950:#fce7f3;
  --rose-50:#271517; --rose-100:#35181c; --rose-200:#511d25; --rose-300:#8f454f; --rose-400:#fb7185; --rose-500:#f43f5e; --rose-600:#e11d48; --rose-700:#fb7185; --rose-800:#fda4af; --rose-900:#fecdd3; --rose-950:#ffe4e6;

  --bg: #0b0f0d;
  --surface: #121815;
  --subtle: #161d19;
  --line: #1e2622;

  --on-color: #07110b;            /* filled buttons turn light in dark mode, so their text goes dark */

  --mid: #fb923c;
  --mid-bg: #2c1d0e;
  --mid-line: #572f10;
  --warn: #f59e0b;
  --bad: #f87171;
  --bad-bg: #2b1615;
  --bad-line: #54201f;
  --crit: #ef4444;
  --info: #60a5fa;
  --info-bg: #132132;

  --card-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
}

/* Form controls. main.css (Tailwind forms plugin) paints inputs, selects,
 * textareas and checkboxes white; in dark mode they follow the theme.
 * :where() keeps this at the plugin's own specificity, so Tailwind classes
 * set on an input (bg-*, border-*) still win. */
:where(:root[data-theme="dark"]) :is([type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select) {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}
:where(:root[data-theme="dark"]) :is([type='checkbox'],[type='radio']) {
  background-color: var(--surface);
  border-color: var(--border);
}