/* ──────────────────────────────────────────────────────────────────
   AERx Dashboard — tokens (brand-governed)
   Brief §1–2 mapped onto the AER brand system. Brand wins conflicts:
   serif = Source Serif 4 (not Playfair) · body = Inter (not Source Sans 3)
   accent = #FF003C (identity only) · data palette = brand status/DVI colors
   ────────────────────────────────────────────────────────────────── */
:root {
  --dash-bg:             #FAFAF8;   /* brand paper */
  --dash-surface:        #FFFFFF;
  --dash-sunken:         #F4F2EC;   /* warm inset (About paper-warm) */
  --dash-ink:            #1A1A1A;
  --dash-border:         #E5E3DD;   /* brand rule */
  --dash-border-strong:  #1A1A1A;
  --dash-muted:          #6B6B6B;
  --dash-accent:         #FF003C;   /* identity ONLY: active nav, logo, key emphasis */

  /* Data palette — drawn from brand status + DVI ramps (no new hues) */
  --viz-pos-bg:    #DDEFD9;  /* status green — positive delta chip */
  --viz-pos-ink:   #1F6B3C;
  --viz-neg-bg:    #F8DCDC;  /* status pink — negative delta chip */
  --viz-neg-ink:   #A03333;
  --viz-line:      #283491;  /* brand navy — primary series */
  --viz-line-2:    #63BE7B;  /* DVI green — comparison series */
  --viz-cat-1:     #283491;
  --viz-cat-2:     #63BE7B;
  --viz-cat-3:     #FEDE81;
  --viz-cat-4:     #F8766D;
  --viz-seq-0:     #ECECEC;  /* sequential ramp start (neutral) */
  --viz-seq-1:     #B0BAEF;  /* periwinkle */
  --viz-seq-2:     #283491;  /* navy max */

  --dash-serif: 'Source Serif 4', Georgia, serif;
  --dash-mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;
  --dash-sans:  'Inter', -apple-system, sans-serif;

  /* brand chrome: square cards, hairline borders; 5px chips; 20px panel top */
  --dash-r-card: 0px;
  --dash-r-chip: 5px;
  --dash-r-panel: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--dash-ink); color: var(--dash-ink); font-family: var(--dash-sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--dash-accent); color: #fff; }
a { color: inherit; text-decoration: none; }

.eyebrow {
  font-family: var(--dash-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dash-muted);
}
.eyebrow.red { color: var(--dash-accent); }

.card {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-r-card);
}
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--dash-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; padding: 3px 8px; border-radius: var(--dash-r-chip);
}
.chip.pos { background: var(--viz-pos-bg); color: var(--viz-pos-ink); }
.chip.neg { background: var(--viz-neg-bg); color: var(--viz-neg-ink); }
.chip.flat { background: var(--dash-sunken); color: var(--dash-muted); }
.chip.src { background: var(--dash-sunken); color: var(--dash-ink); letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--dash-border); }

/* Skip link — first focusable element; visually hidden until keyboard focus. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  font-family: var(--dash-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--dash-ink); color: #fff; padding: 10px 16px;
  border: 1px solid #fff; outline-offset: 2px;
}
.skip-link:focus { left: 8px; top: 8px; }