/* Weather Hub shared roles. Scientific ramps are defined separately in styles.css. */

:root {

  --intro: #e9f4ff;
  --surface: #ffffff;
  --teal: #07757c;
  --briefing: #e5f5f2;
  --archive: #fbf4e5;
  --radius-control: 8px;
  --radius-surface: 10px;
  /* Preview interiors. DESIGN.md has named this 6px since the Weather Hub review, but
     it was the one radius in the system with no token, written as a literal in two
     places while its 8px and 10px siblings were referenced on the adjacent line. */
  --radius-preview: 6px;
  --hub-width: 1400px;
  --hub-gutter: clamp(18px, 4.43vw, 68px);
  /* Scientific map roles remain independent of page surfaces. */
  --graphic-paper: #f9f9f7;
  --graphic-ink: #14161a;
  --graphic-ink-2: #383d44;
  --graphic-muted: #5a5f66;
  --graphic-line: #c9cbc7;
  --graphic-line-strong: #a5a8a2;
  --graphic-wash: #e7ecf7;
  --graphic-ocean-base: #14275e;
  /* The cyclone graphics' plate (app/render/style.py Palette). Map roles only, apart from
     page surfaces and from the --graphic-* roles the Severe and homepage maps use, so a
     page redesign never repaints a published map. tests/render/test_plate_parity.py holds
     the renderer to these and measures every pair that has to read. */
  --plate-land: #f6f4ee;
  --plate-water: #d9ebf8;
  --plate-water-2: #d1e6f6;
  --plate-water-3: #c9e0f3;
  --plate-water-4: #c1dbf0;
  --plate-water-label: #2c5878;
  --plate-coast: #4f6b82;
  --plate-border: #9fb3c2;
  --plate-state: #c3cfd8;
  --plate-county: #d3dde4;
  --plate-grid: #bfd3e3;
  --plate-relief: #57544b;
  --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* One type scale, named by role and sized in rem.
   *
   * It was two scales: these six, and `--hub-type-1` … `--hub-type-16` — sixteen
   * positionally-named sizes carrying no role, yielding 11, 12, 13, 14, 15, 16, 17, 18,
   * 20, 21, 22, 26, 27, 28 and 29px plus four clamps. Sixteen numbers with no names is not
   * a scale, it is a composition measured off a raster, and nothing in the token could say
   * whether a new heading wanted -3, -8 or -13. The near-duplicates are collapsed (20 and
   * 21; 26, 27, 28 and 29) and every survivor is named for what it is used for.
   *
   * rem, not px, and that is the substantive change rather than a unit preference. Every
   * size on the homepage was px, so a reader who raises their browser's *default font
   * size* — a standard low-vision accommodation, and a different control from page zoom —
   * got no change at all on this page. At the default 16px root every value below computes
   * to exactly the pixel size it replaced, so the rendered page is unchanged; it now moves
   * when the reader asks it to. */
  --fs-micro: 0.75rem;      /* 12px — metadata, captions, footer */
  --fs-small: 0.8125rem;    /* 13px — dense supporting text, compact navigation */
  --fs-bulletin: 0.9375rem; /* 15px — monospaced product text */
  --fs-remarks: 1rem;       /* 16px — body copy and advisory remarks */
  --fs-lead: 1.1875rem;     /* 19px — lead paragraphs and emphasised body */
  --fs-subhead: 1.3125rem;  /* 21px — storm names, card headings, panel actions */
  --fs-section: 1.75rem;    /* 28px — section headings */
  --fs-lede: clamp(1.125rem, 2vw, 1.875rem);    /* 18–30px — document and workspace section headings */
  --fs-title: clamp(2rem, 3.2vw, 2.5rem);       /* 32–40px — inner page titles */
  --fs-display: clamp(1.875rem, 3.9vw, 3.5rem); /* 30–56px — the homepage headline */
  --lh-title: 1.15;
  --lh-lead: 1.3;
  --lh-bulletin: 1.55;
  --lh-remarks: 1.65;
  --lh-micro: 1.4;
  --track-title: -0.01em;
  --track-micro: 0.04em;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 44px;
  --enamel: #0759c7;
  --enamel-strong: #064aa6;
  --enamel-wash: #e9f4ff;
  --enamel-link: #0759c7;
  --on-enamel: #ffffff;
  --on-enamel-muted: #ffffff;
  --network: color-mix(in srgb, var(--enamel) 26%, transparent);
  --radius-node: 999px;
  --paper: #f6fafd;
  --wash: color-mix(in srgb, var(--ink) 4%, transparent);
  --wash-strong: color-mix(in srgb, var(--ink) 8%, transparent);
  --ink: #102a43;
  --ink-2: #3d5871;
  --muted: #3d5871;
  --line: #bdd2de;
  --line-strong: #607e91;
  --edge: #607e91;
  --link: var(--enamel-link);
  --code-bg: var(--wash);
  --skeleton: var(--wash-strong);
  --header: var(--intro);
  --header-ink: var(--ink);
  --header-nav: var(--ink);
  --divider: color-mix(in srgb, var(--ink) 12%, transparent);
  --divider-strong: color-mix(in srgb, var(--ink) 24%, transparent);
  --hairline: 1px solid var(--line);
  --focus-ring: 3px solid var(--link);
  --focus-offset: 2px;
  --dur: 0.16s;
  --ease: ease;
  --wrap-prose: 68ch;
  --wrap: 1120px;
  --wrap-wide: 1440px;
  --gutter: var(--sp-5);
  --masthead-h: 62px;
  --pagehead-h: 0px;
  --banner-h: 0px;
  --subnav-h: 0px;
  --panel-w: 300px;
  --subrail-w: 236px;
  --drawer-w: 340px;
  --drawer-bp: 900px;
  color-scheme: light;
}
:root[data-theme="dark"],
:root[data-dark]:not([data-theme="light"]),
.viewer {
  color-scheme: dark;
  --intro: #1b324b;
  --surface: #172a3c;
  --teal: #80d2d0;
  --briefing: #163738;
  --archive: #363126;
  --paper: #101e2d;
  --ink: #f1f7fc;
  --ink-2: #b5c9db;
  --muted: #b5c9db;
  --line: #385368;
  --line-strong: #809cb1;
  --edge: #809cb1;
  --enamel: #8abcff;
  --enamel-strong: #a5cdff;
  --enamel-wash: #1b324b;
  --enamel-link: #8abcff;
  --on-enamel: #102a43;
  --on-enamel-muted: #102a43;
  --divider: color-mix(in srgb, var(--ink) 16%, transparent);
  --divider-strong: color-mix(in srgb, var(--ink) 28%, transparent);
}