/* ============================================================
   Watchdog HQ — Brand System v1.0 · 18 April 2026
   Single source of truth for all design tokens.
   Paper, not pixels. Editorial. British. Concise.
   ============================================================ */

:root {
  /* --- Ink & Paper --------------------------------------- */
  --ink-900:  #0F1217;   /* text, logo, primary button */
  --ink-800:  #1A1F27;   /* dark surface variant */
  --ink-700:  #2B313B;   /* secondary dark, body on paper */
  --ink-500:  #5B6472;   /* secondary text */
  --ink-400:  #828B99;   /* tertiary text, mono-note */
  --ink-300:  #B6BCC6;   /* disabled, rule-hover */
  --ink-200:  #D9DDE3;   /* hairlines, borders */
  --ink-100:  #EDEFF3;   /* radius swatch bg */

  --paper-0:  #FFFFFF;   /* card surfaces */
  --paper-50: #FAF7F1;   /* page background */
  --paper-100:#F3EEE4;   /* section band, hover, warm alt surface */

  /* --- Signal ------------------------------------------- */
  --signal-600: #8C1D18; /* oxblood — accent, link-hover, mark */

  /* --- Semantic tiers (600 = border/text; 100 = fill) --- */
  --alert-600: #B6432A;  --alert-100: #F8E6DF;   /* Verify (urgent tier) */
  --watch-600: #6B5217;  --watch-100: #F6ECCF;   /* Watch (action_required tier) — 2026-05-11 darkened from #8A6A1E to pass WCAG AA 4.5:1 on cream watch-100 background */
  --info-600:  #2E4E6E;  --info-100:  #E1E8EF;   /* FYI */
  --ok-600:    #2F5D3E;  --ok-100:    #DDE8DF;   /* Done */

  /* --- Typography --------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter Tight', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', Menlo, Consolas, monospace;

  /* --- Type scale (px) ---------------------------------- */
  --fs-4xl: clamp(56px, 7vw, 96px);   /* hero only */
  --fs-3xl: clamp(44px, 5vw, 68px);   /* section headers */
  --fs-2xl: clamp(32px, 3.2vw, 44px);
  --fs-xl:  28px;
  --fs-lg:  22px;                     /* lead paragraph */
  --fs-md:  18px;                     /* body long-form */
  --fs-base:16px;                     /* body default */
  --fs-sm:  14px;                     /* caption */
  --fs-xs:  12px;                     /* meta */

  /* --- Spacing (4-point grid) --------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* --- Radius (no pill cards) --------------------------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;   /* CHIPS ONLY */

  /* --- Elevation (near-invisible) ----------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 18, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 18, 23, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 18, 23, 0.08);

  /* --- Rules & layout ----------------------------------- */
  --rule:             1px solid var(--ink-200);
  --rule-strong:      2px solid var(--ink-900);
  --container:        1180px;
  --container-narrow: 880px;
}

/* ============================================================
   Base resets
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper-50);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--ink-900); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-600); }
img, svg { display: block; max-width: 100%; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--sp-6); }

/* ============================================================
   Typography primitives
   ============================================================ */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink-900);
}
.display .it {
  font-style: italic;
  font-weight: 400;
  color: var(--signal-600);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.lead {
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--ink-700);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--ink-900); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-4); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary   { background: var(--ink-900); color: var(--paper-50); border-color: var(--ink-900); }
.btn-primary:hover { background: var(--signal-600); border-color: var(--signal-600); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn-secondary:hover { background: var(--ink-900); color: var(--paper-50); }
.btn-ghost     { background: transparent; color: var(--ink-700); border: 0; padding: 12px 4px; }
.btn-ghost:hover { color: var(--signal-600); }
.btn-lg { padding: 14px 22px; font-size: 15px; }

/* ============================================================
   Tags / chips (pill allowed here, per brand rules)
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  border: 1px solid var(--ink-300);
  color: var(--ink-700);
  background: transparent;
  white-space: nowrap;
}
.tag-do    { color: var(--alert-600); border-color: var(--alert-600); background: var(--alert-100); font-weight: 600; }
.tag-watch { color: var(--watch-600); border-color: var(--watch-600); background: var(--watch-100); font-weight: 600; }
.tag-fyi   { color: var(--info-600);  border-color: var(--info-600);  background: var(--info-100);  font-weight: 600; }
.tag-done  { color: var(--ok-600);    border-color: var(--ok-600);    background: var(--ok-100);    font-weight: 600; }

/* ============================================================
   Section bands (paper-50 / paper-100 / ink-900)
   ============================================================ */
.band-paper { background: var(--paper-50); }
.band-alt   { background: var(--paper-100); }
.band-dark  { background: var(--ink-900); color: var(--paper-50); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--paper-50); }
.band-dark .eyebrow { color: var(--ink-400); }

section { padding: var(--sp-20) 0; }
.section-head {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-10);
  align-items: baseline;
  padding-bottom: var(--sp-8);
  border-bottom: var(--rule-strong);
  margin-bottom: var(--sp-10);
}
.section-head h2 { font-size: var(--fs-2xl); }
.section-head .lead { max-width: 58ch; }

/* ============================================================
   Alert rows — used in the weekly brief
   ============================================================ */
.alert {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--alert-600);
  background: var(--paper-0);
  border-top: 1px solid var(--ink-200);
  border-right: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.alert.watch { border-left-color: var(--watch-600); }
.alert.fyi   { border-left-color: var(--info-600); }
.alert .title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-md); }
.alert .meta  { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .08em; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; gap: var(--sp-4); }
  section { padding: var(--sp-12) 0; }
}