/*
 * dugganusa.css — the one DugganUSA token set for security.dugganusa.com
 * (enterprise-extraction-platform docs/standards/brand-standard.md §4; same values as
 * https://analytics.dugganusa.com/css/dugganusa.css, so every host paints the same).
 *
 * LIGHT IS THE FIRST PAINT EVERYWHERE (Patrick 2026-10-16). Dark is opt-in only, via
 * <html data-theme="dark">. It never follows the OS (no OS color-scheme media query here) and it is
 * never the default. Pages must not force data-theme="dark" or class="dark" on <html>.
 *
 * Every public page links this file: the server's brand snippet injects it (just before
 * </head>, so it lands AFTER a page's own <style> and its tokens win), app.html and /login
 * link it themselves. shared-nav.js sees this file (href contains "dugganusa.css") and does
 * not pull the remote copy.
 *
 * WCAG 2.1 AA (>= 4.5:1 for every text/background pair; checked 2026-10-21):
 *   --accent       fills, buttons, borders  (#4f46e5 both themes; white on it 6.29:1)
 *   --accent-text  links / colored text     (#4f46e5 light 6.08:1 on #fbfbfd; #818cf8 dark 6.71:1)
 *   --success/--warning/--danger are TEXT-safe in each theme (light: #15803d 4.85:1,
 *   #b45309 4.86:1, #b91c1c 6.26:1 on #fbfbfd; >= 4.56:1 on --bg-soft). The bright *-fill values are for dots, bars
 *   and borders only, never under or as text. Never white text on #6366f1 (4.47:1).
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg: #fbfbfd; --bg-soft: #f3f4f8; --bg-card: #ffffff; --bg-card-hover: #f6f7fb;
  --border: #e3e6ee; --border-strong: #cfd4e0;
  --text: #0d1020; --text-soft: #444c63; --text-muted: #5b6478;
  --accent: #4f46e5; --accent-hover: #4338ca; --accent-text: #4f46e5; --accent-2: #0e7490;
  --success: #15803d; --warning: #b45309; --danger: #b91c1c;
  --success-fill: #22c55e; --warning-fill: #f59e0b; --danger-fill: #ef4444;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* helpers, defined per theme so pages never hardcode a white or black overlay */
  --on-accent: #ffffff;                       /* text on --accent fills */
  --accent-text-hover: #4338ca;               /* 7.65:1 on --bg */
  --accent-tint: rgba(79, 70, 229, 0.08);     /* chip / badge fill behind --accent-text */
  --accent-tint-strong: rgba(79, 70, 229, 0.16);
  --tint: rgba(13, 16, 32, 0.04);             /* subtle fill on --bg */
  --tint-strong: rgba(13, 16, 32, 0.08);
  --nav-overlay: rgba(251, 251, 253, 0.92);   /* translucent sticky bars */
  --code-bg: #f3f4f8; --code-text: #0d1020;
  --shadow: 0 1px 2px rgba(13, 16, 32, 0.05), 0 8px 24px -12px rgba(13, 16, 32, 0.12);

  /* legacy aliases used by older page templates, mapped onto the standard set */
  --bg-primary: var(--bg); --bg-secondary: var(--bg-soft); --bg-tertiary: var(--bg-card);
  --bg-code: var(--code-bg);
  --text-primary: var(--text); --text-secondary: var(--text-soft);
  --border-color: var(--border);
  --link-color: var(--accent-text); --link-hover: var(--accent-text-hover);
  --accent-light: var(--accent-text); --accent-lighter: var(--accent-text-hover);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #07080d; --bg-soft: #0e1017; --bg-card: #11141d; --bg-card-hover: #171b27;
  --border: #1f2433; --border-strong: #2c3245;
  --text: #f4f6fb; --text-soft: #a4adc1; --text-muted: #8b95ad;
  --accent: #4f46e5; --accent-hover: #4338ca; --accent-text: #818cf8; --accent-2: #22d3ee;
  --success: #22c55e; --warning: #f59e0b; --danger: #ef4444;
  --success-fill: #22c55e; --warning-fill: #f59e0b; --danger-fill: #ef4444;
  --accent-text-hover: #a5b4fc;
  --accent-tint: rgba(79, 70, 229, 0.12);
  --accent-tint-strong: rgba(79, 70, 229, 0.22);
  --tint: rgba(255, 255, 255, 0.04);
  --tint-strong: rgba(255, 255, 255, 0.08);
  --nav-overlay: rgba(7, 8, 13, 0.88);
  --code-bg: #0e1017; --code-text: #f4f6fb;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

/* Mono for indicators, hashes, commands and numbers (STANDARD §4). */
code, kbd, samp, pre, .mono { font-family: var(--font-mono); }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Phones: nothing may push the page wider than the viewport. :where() keeps these at zero
   specificity so a page's own rules still win. */
:where(img, video, canvas, iframe) { max-width: 100%; }
:where(img, video) { height: auto; }
:where(pre) { overflow-x: auto; max-width: 100%; }
:where(code, kbd, samp, a) { overflow-wrap: anywhere; }
:where(p, li, td, th, dd, dt, blockquote, h1, h2, h3, h4, figcaption) { overflow-wrap: break-word; }
.table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  :where(table) { display: block; overflow-x: auto; max-width: 100%; }
  /* 16px side gutter on phones for the server-rendered templates' content column */
  .container, .container-sm { padding-left: 16px; padding-right: 16px; }
}