/* ============================================================
   Design tokens, fonts, theme switching and base styles.

   Direction: a PMO status report, not a SaaS template. Two typefaces with distinct jobs: Source Serif 4 for the
   headline sentence, KPI figures and wordmark (financial-report figures), IBM Plex Sans for everything else.
   Structure comes from rules and spacing rather than boxed cards. One loud thing per page: the serif figures.
   Brand is aubergine on purpose: a blue brand would collide with the "In Progress" blue.

   Colour checks (all measured, see CLAUDE.md): every text/background pair below is >= 4.5:1; status colours pass the
   dataviz palette validator on these surfaces. Conditions that came with it: no text on status fills; light-mode
   aqua is under 3:1 so charts always carry labels and a table twin; dark-mode red/aqua are close so icons, gaps and
   the hatch on Blocked are mandatory.
   ============================================================ */

/* Self-hosted fonts (Latin subset, SIL Open Font License, licences in /fonts). Other scripts fall back to the system. */
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --logo-backing: transparent; --logo-pad: 0;   /* the navy logo needs a white plate on dark themes */
  color-scheme: light;

  /* surfaces and ink */
  --paper: #f2f3f5;
  --sheet: #ffffff;
  --sheet-2: #f7f6f9;
  --ink: #221e2b;
  --ink-2: #4f4a5e;
  --muted: #67627a;
  --rule: #dad7e0;
  --rule-strong: #b9b4c6;
  --shadow: 0 1px 2px rgba(34, 30, 43, 0.08);
  --shadow-lg: 0 12px 36px rgba(34, 30, 43, 0.22);
  --scrim: rgba(34, 30, 43, 0.55);

  /* brand: aubergine */
  --brand: #4a2c6e;
  --brand-hover: #3b2258;
  --brand-tint: #efe9f7;
  --on-brand: #ffffff;
  --link: #4a2c6e;
  --focus: #6b3fa0;

  /* task statuses: fill (marks), ink (text), tint (chip background) */
  --st-backlog: #898781;   --st-backlog-ink: #4f4a5e;  --st-backlog-tint: #eceae4;
  --st-progress: #2a78d6;  --st-progress-ink: #1c5cab; --st-progress-tint: #e3eefc;
  --st-blocked: #d03b3b;   --st-blocked-ink: #b42323;  --st-blocked-tint: #fbe7e7;
  --st-done: #1baf7a;      --st-done-ink: #006300;     --st-done-tint: #def5ec;

  /* priorities (left bar on cards; chips always carry the word too) */
  --pr-critical: #d03b3b;
  --pr-high: #eda100;
  --pr-medium: #2a78d6;
  --pr-low: #898781;
  --warn-ink: #8a5300;
  --warn-tint: #fff1d6;

  /* type */
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;    /* 13px: only for dense captions */
  --fs-sm: 0.875rem;     /* 14px: tables, meta, controls */
  --fs: 1rem;            /* 16px: body */
  --fs-lg: 1.1875rem;    /* 19px */
  --fs-xl: 1.625rem;     /* 26px */
  --fs-2xl: 2.25rem;     /* 36px */
  --fs-hero: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-figure: clamp(3.75rem, 6.2vw, 6.5rem);

  /* space and shape: radii differ by role (controls, cards, chips) instead of one radius everywhere */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --r-chip: 3px; --r-control: 6px; --r-card: 8px; --r-dialog: 12px;
  --page: 1320px;
}

/* Dark theme: its own steps, not an inversion. Declared for the OS setting and for the manual toggle
   (the :not() guard lets an explicit "light" beat an OS-dark preference). */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --paper: #141218; --sheet: #1d1a24; --sheet-2: #26222f;
    --ink: #eeeaf4; --ink-2: #c9c3d6; --muted: #a39db3;
    --rule: #34303f; --rule-strong: #4a455a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.6);
    --scrim: rgba(0, 0, 0, 0.65);
    --brand: #6b45a3; --brand-hover: #7c57b6; --brand-tint: #2d2340; --on-brand: #ffffff; --link: #bfa3ee; --focus: #c7a6f0;
    --st-backlog: #898781; --st-backlog-ink: #c9c3d6; --st-backlog-tint: #34303f;
    --st-progress: #3987e5; --st-progress-ink: #7db4f0; --st-progress-tint: #17283f;
    --st-blocked: #d03b3b; --st-blocked-ink: #f08080; --st-blocked-tint: #3a1d1d;
    --st-done: #199e70; --st-done-ink: #4dc9a0; --st-done-tint: #14322a;
    --pr-critical: #e66767; --pr-high: #c98500; --pr-medium: #3987e5; --pr-low: #898781;
    --warn-ink: #f0b84a; --warn-tint: #3a2e12;
    --logo-backing: #fff; --logo-pad: 4px 8px;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141218; --sheet: #1d1a24; --sheet-2: #26222f;
  --ink: #eeeaf4; --ink-2: #c9c3d6; --muted: #a39db3;
  --rule: #34303f; --rule-strong: #4a455a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 0, 0.65);
  --brand: #6b45a3; --brand-hover: #7c57b6; --brand-tint: #2d2340; --on-brand: #ffffff; --link: #bfa3ee; --focus: #c7a6f0;
  --st-backlog: #898781; --st-backlog-ink: #c9c3d6; --st-backlog-tint: #34303f;
  --st-progress: #3987e5; --st-progress-ink: #7db4f0; --st-progress-tint: #17283f;
  --st-blocked: #d03b3b; --st-blocked-ink: #f08080; --st-blocked-tint: #3a1d1d;
  --st-done: #199e70; --st-done-ink: #4dc9a0; --st-done-tint: #14322a;
  --pr-critical: #e66767; --pr-high: #c98500; --pr-medium: #3987e5; --pr-low: #898781;
  --warn-ink: #f0b84a; --warn-tint: #3a2e12;
  --logo-backing: #fff; --logo-pad: 4px 8px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern", "liga";
}
h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 600; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-2); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none; transition: none; scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .btn, .tab, .kpi, .icon-btn { border: 1px solid ButtonText; }
}