/*
tokens.css — every design token, nothing else.
Pulled directly from the design system doc (technical-project-plan.md §2)
and DataBank Brand System - Guidelines.html — no reinterpretation.
Re-read both source docs before changing any value here.

2026-10-07: added the tokens below after inspecting Claude Design's own
tokens/*.css for the approved homepage design (design-handoff/home.html,
read via the live rendered page — same token names and values already,
confirming it was built from the same brand source). These are additions,
not corrections: --figure-track, --link-underline-*, --border-hairline,
--icon-stroke-dark-bump, --margin-slide/print, the whole --graphics-*
group, and the dark-mode --accent-ink remap. See components.css and the
new graphics.css for where they're used.

2026-10-19: found that --font-display/--font-body/--font-mono below had
named Space Grotesk/IBM Plex Sans/IBM Plex Mono since day one, but no
@font-face declaration, Google Fonts <link>, or font file existed
anywhere in the theme — every page in the project had been silently
rendering in system-ui/sans-serif this whole time, confirmed against
design-handoff/amazon-web-services-aws.html's own embedded @font-face
rules (which do use these 3 real Google Fonts). Fixed by self-hosting
(not a Google Fonts CDN link, to avoid an external request/privacy
dependency on every page load): downloaded the latin + latin-ext
subsets only (this site is English-only; cyrillic/greek/vietnamese
subsets would be dead weight) for the 3 weights actually used anywhere
(--weight-regular/medium/semibold = 400/500/600) into
assets/fonts/. Space Grotesk and IBM Plex Sans are served by Google as
variable fonts — the same file covers all 3 weights, so only 2 files
each (one per subset) were needed; IBM Plex Mono ships static per-weight
files, so 6 files (3 weights × 2 subsets). This file is enqueued on
every real page (functions.php) and linked directly by every
preview/*.html file, so declaring the fonts here fixes every page at
once — no per-page changes needed.
*/

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Type families */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Primaries */
  --color-navy-base: #00263D;
  --color-navy-light: #8FAECB;
  --color-blue-base: #427DFF;
  --color-blue-light: #DBE7FF;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-offwhite: #EDF0F7;
  --color-lightblue: #DBE7FF;

  /* Accents — named for the industry, never the hue */
  --color-accent-government: #2ED3D3;
  --color-accent-government-light: #D2F4F4;
  --color-accent-insurance: #1FAF6B;
  --color-accent-insurance-light: #CFEFDF;
  --color-accent-energy: #FFB81C;
  --color-accent-energy-light: #FFEBC4;
  --color-accent-exception: #F2445C;
  --color-accent-exception-light: #FFD8DD;

  --color-accent-government-ink: #06717A;
  --color-accent-insurance-ink: #14794A;
  --color-accent-energy-ink: #8A5F06;
  --color-accent-exception-ink: #C11B31;

  /* Semantic aliases — light mode default */
  --surface-page: var(--color-offwhite);
  --surface-plate: var(--color-white);
  --surface-field: var(--color-lightblue);
  --text-primary: var(--color-navy-base);
  --text-secondary: #4A5A6E;
  --text-tertiary: #566878;
  --text-link: var(--color-blue-base);
  --line-hairline: #D7DEE8;
  --line-rule: #B9C6D6;

  --accent: var(--color-blue-base);
  --accent-light: var(--color-blue-light);
  --accent-ink: #1F5AE0;

  /* Type scale */
  --type-display-1-size: 56px; --type-display-1-line: 1.05; --type-display-1-track: -.03em;
  --type-display-2-size: 34px; --type-display-2-line: 1.12; --type-display-2-track: -.025em;
  --type-heading-size: 22px;   --type-heading-line: 1.2;    --type-heading-weight: 500; --type-heading-track: -.02em;
  --type-body-size: 17px;      --type-body-line: 1.55;
  --type-body-m-size: 15px;    --type-body-m-line: 1.55;
  --type-small-size: 13px;     --type-small-line: 1.5;
  --type-label-size: 10px;     --type-label-line: 1.2;      --type-label-track: .12em;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  --type-stat-sm-size: 25px; --type-stat-md-size: 36px;
  --type-stat-lg-size: 50px; --type-stat-xl-size: 76px; --type-stat-line: 1;
  --figure-track: 0; /* figures are tabular with zero tracking — negative tracking is for words, never digits */

  /* Inline text links only. Underline always present, in the link's own color. */
  --link-underline-weight: 1px;
  --link-underline-offset: 3px;

  /* Spacing — 8px base */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px;
  --grid-columns: 12; --grid-gutter: 32px;
  --plate-padding: 24px; --plate-padding-large: 32px;
  --margin-slide: 80px; --margin-print: 44px;

  /* Radius — continuous, 6% of the shorter side, never a pill */
  --radius-ratio: 6%; --radius-min: 3px; --radius-max: 14px;
  --accent-line-weight: 2px; --accent-rule-weight: 3px;
  --border-hairline: 1px solid var(--line-hairline);

  /* Icon stroke weight by size — redrawn per size, never scaled from one master */
  --icon-stroke-20: 1.0;
  --icon-stroke-28: 1.25;
  --icon-stroke-40: 1.5;
  --icon-stroke-56: 1.75;
  --icon-stroke-dark-bump: .1; /* dark mode: skeleton inverts navy → white, stroke steps up a tenth of a point */

  --motion-duration: 160ms;
  --motion-easing: cubic-bezier(.4,0,.2,1);

  /* Graphics layer only — layered, illustrative compositions (systems/process
     diagrams), never the flat UI foundation above. Icons, cards, buttons and
     every other component stay flat and shadowless, as already built; this is
     a second, separate visual register. Light source upper-left; shadows
     fall down-right, tinted navy, never pure black. */
  --graphics-gradient: linear-gradient(135deg, #427DFF, #2ED3D3);
  --graphics-gradient-alert: linear-gradient(135deg, #F2445C, #FFB81C);
  --graphics-glow: 0 0 40px rgba(66,125,255,.35);
  --graphics-shadow-sm: 8px 12px 20px rgba(0,38,61,.14);
  --graphics-shadow-md: 10px 18px 30px rgba(0,38,61,.20);
  --graphics-shadow-lg: 14px 26px 44px rgba(0,38,61,.26);
  --graphics-node-radius: 12px;
  --graphics-dull: #B7C2CC;

  /* Dark graphics-register variant — added 2026-10-19 for Document Scanning
     Services (the Product/Solution "secondary" page template's hero always
     carries a graphic, and a secondary hero is dark per page-depth rules,
     so the light-only graphics register above can't render on it). Same
     layered/illustrative role as --graphics-* above, same light-upper-left
     shadow logic, just recalibrated for cards sitting on a navy field
     instead of white: translucent surfaces instead of opaque white, pure-
     black shadow tints instead of navy-tinted ones (a navy-tinted shadow
     disappears against a navy background), light borders instead of none.
     First used by graphics.css's intake-capture composition — reuse these
     tokens directly for Refine/Manage/Activate's own dark hero graphics
     rather than inventing new ones per page. */
  --graphics-dark-surface-back: rgba(255,255,255,.06);
  --graphics-dark-surface: rgba(255,255,255,.10);
  --graphics-dark-ground: #0C3A56;
  --graphics-dark-edge: rgba(255,255,255,.14);
  --graphics-dark-dull: #5E7B94;
  --graphics-dark-ink-2: var(--color-navy-light);
  --graphics-dark-shadow-sm: 8px 12px 20px rgba(0,0,0,.30);
  --graphics-dark-shadow-md: 10px 18px 30px rgba(0,0,0,.36);
  --graphics-dark-shadow-lg: 14px 26px 44px rgba(0,0,0,.42);
  --graphics-dark-glow: var(--graphics-glow);
}

/* Sub-brand accent scopes — apply to the root of a piece of content */
[data-subbrand="government"] { --accent: var(--color-accent-government); --accent-light: var(--color-accent-government-light); --accent-ink: var(--color-accent-government-ink); }
[data-subbrand="insurance"]  { --accent: var(--color-accent-insurance);  --accent-light: var(--color-accent-insurance-light);  --accent-ink: var(--color-accent-insurance-ink); }
[data-subbrand="energy"]     { --accent: var(--color-accent-energy);     --accent-light: var(--color-accent-energy-light);     --accent-ink: var(--color-accent-energy-ink); }
/* Healthcare Payers shares Insurance's accent — Scott's explicit call,
   2026-10-20 ("Payers will share Insurance as they are both types of
   insurance"), not an invented color. Kept as its own selector rather
   than reusing the literal subbrand value "insurance" on Healthcare
   Payers pages, so the data-subbrand attribute still matches the real
   industry and stays easy to split onto its own color later if that
   ever changes. */
[data-subbrand="healthcare-payers"] { --accent: var(--color-accent-insurance); --accent-light: var(--color-accent-insurance-light); --accent-ink: var(--color-accent-insurance-ink); }
/* The 6 industries without a rule above (Medical, Financial, Accounting, HR,
   Higher Education, Accounts Payable) intentionally have no [data-subbrand]
   override — they fall through to the root --accent (DataBank Blue) via
   normal CSS cascade. Confirmed decision (Scott, 2026-09-16), not a
   placeholder — see technical-project-plan.md §6. */

/* Industry Challenges / Industry Use Case tier (added 2026-10-20) reuses
   this exact same [data-subbrand] system for its 7 priority industries —
   Public Sector, Energy, Insurance, Healthcare Payers, Education,
   Healthcare Providers, Regulated Industries (see
   industry-challenges-templates.md). 3 of the 7 already match a rule
   above (Public Sector -> government, Energy -> energy, Insurance ->
   insurance) — no new tokens needed for those. The other 4 have NO
   brand-system-defined accent yet; don't invent one here. Same fallback
   as the 6 industries above until Scott/a real Claude Design export
   supplies real values the way government/insurance/energy originally
   came from the brand-system doc. */

/* Dark mode — tokens remap, no separate component set */
[data-mode="dark"] {
  --surface-page: var(--color-navy-base);
  --surface-plate: #08344F;
  --surface-field: rgba(255,255,255,.06);
  --text-primary: var(--color-white);
  --text-secondary: rgba(255,255,255,.72);
  --text-tertiary: rgba(255,255,255,.68);
  --line-hairline: rgba(255,255,255,.16);
  --line-rule: rgba(255,255,255,.28);
  /* --border-hairline composes --line-hairline at declaration time (a
     custom-property pitfall: nested var() bakes in whatever --line-hairline
     resolved to at :root, not wherever the composite is later consumed), so
     without this re-declaration every dark-mode hairline border/divider
     sitewide (hero photo frames, header/utility-bar/nav rules, footer,
     dropdown menu, cards) silently fell back to the light-mode #D7DEE8
     instead of this scope's translucent white. Caught 2026-10-29 auditing
     the Who We Are hero's off-brand-looking white outlines. */
  --border-hairline: 1px solid var(--line-hairline);
  --accent-ink: var(--color-navy-light); /* link hover on dark: navy-light reads, the light-mode ink (#1F5AE0) doesn't */
}