/* Design tokens for the whole suite. One family look: navy for the frame and for the main action, red only for the
   brand mark and for actions that remove something. Every colour pair used for text is checked for contrast by a test. */
@font-face {
  font-family: 'Archivo';
  src: url('/ui/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
:root {
  color-scheme: light;
  --bg: #E9EDF3; --surface: #FFFFFF; --surface-2: #F5F7FA; --sunk: #E4E8EE;
  --ink: #121826; --muted: #4F596B; --faint: #6B7587;
  --line: #D6DCE5; --line-strong: #B4BDCB;
  --navy: #0C1B56; --navy-ink: #FFFFFF; --navy-sub: #C4CCE6; --navy-hi: #1D2E78;
  --band: #0C1B56; --band-hi: #1C40CA; --band-sub: #E4E9FB;
  --primary: #0C1B56; --primary-hover: #17297A; --primary-ink: #FFFFFF;
  --brand: #D2232A;
  --danger: #B3202A; --danger-soft: #FBE6E7; --danger-ink: #FFFFFF;
  --ok: #17703A; --ok-soft: #E1F2E7;
  --warn: #8A4A05; --warn-soft: #FCEFD9;
  --info: #1F58BF; --info-soft: #E3EAFA;
  --focus: #2F6BFF;
  /* depth (2026-11-11, second pass after Atlassian's elevation and Stripe's layered shadows): the page is a cool grey
     floor and cards are clearly raised from it - a hairline ring, a contact shadow and a long soft cool shadow */
  --shadow: 0 0 0 1px rgba(12, 20, 40, .03), 0 1px 2px rgba(12, 20, 40, .07), 0 6px 16px -6px rgba(12, 24, 64, .12), 0 24px 44px -26px rgba(12, 24, 64, .34);
  --shadow-lift: 0 1px 2px rgba(12, 20, 40, .08), 0 12px 28px -10px rgba(12, 20, 40, .2), 0 40px 72px -30px rgba(12, 24, 64, .42);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .7);
  /* the band (2026-11-11, second pass): a deep band in the company's main color across the top of every page, behind
     the page title and its key numbers, like a blueprint - soft light from the top left, the accent glowing in from the
     right, and a fine white drafting grid. Cards rise out of it. Every layer is a tint of the company's own colors, so
     a logo's colors and the dark theme apply with no code; strengths are low enough that the band's text stays easy to
     read whatever the colors (tests/web/design.test.js works out the worst case). */
  --band-lift: color-mix(in srgb, var(--band-hi) 50%, transparent);
  --band-glow: color-mix(in srgb, var(--brand) 12%, transparent);
  --band-shade: color-mix(in srgb, #000000 24%, transparent);
  --band-sheen: color-mix(in srgb, #FFFFFF 3%, transparent);
  --band-grid: color-mix(in srgb, #FFFFFF 3.5%, transparent);
  --band-grid-major: color-mix(in srgb, #FFFFFF 6%, transparent);
  --glass: color-mix(in srgb, #FFFFFF 6%, transparent);
  --rail-on: color-mix(in srgb, #FFFFFF 8%, transparent); --rail-well: color-mix(in srgb, #000000 18%, transparent);
  --rail-sheen: color-mix(in srgb, #FFFFFF 4%, transparent);
  --rail-glow: color-mix(in srgb, var(--navy-hi) 25%, transparent);
  --rail-grid: color-mix(in srgb, #FFFFFF 3%, transparent);
  --font: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --r: 12px; --r-sm: 8px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --control: 44px; --control-sm: 36px; --control-lg: 52px;
  --rail: 248px; --bar: 60px;
  /* charts (validated with the dataviz palette checks): two series, and an ordered ramp for how late money is, light to
     dark. Fixed on purpose: they must stay readable whatever a company's own colours are. */
  --chart-1: #2A78D6; --chart-2: #EB6834;
  --seq-1: #86B6EF; --seq-2: #5598E7; --seq-3: #2A78D6; --seq-4: #1C5CAB; --seq-5: #104281;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0E14; --surface: #141922; --surface-2: #1A202B; --sunk: #0F131A;
    --ink: #ECEFF4; --muted: #A9B2C2; --faint: #8891A2;
    --line: #2A313D; --line-strong: #414A59;
    --navy: #0A143C; --navy-ink: #FFFFFF; --navy-sub: #B6BFDD; --navy-hi: #1B2A6B;
    --band: #0A143C; --band-hi: #1D3AAE; --band-sub: #E5E9FB;
    --primary: #AFC0FF; --primary-hover: #C6D2FF; --primary-ink: #0A143C;
    --brand: #F0575D;
    --danger: #F58289; --danger-soft: #3A1B1E; --danger-ink: #2A0C0F;
    --ok: #57C989; --ok-soft: #14301F;
    --warn: #F2A94A; --warn-soft: #33250F;
    --info: #86ADFF; --info-soft: #162444;
    --focus: #8FB0FF;
    --shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 1px 2px rgba(0, 0, 0, .45), 0 14px 32px -14px rgba(0, 0, 0, .65);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 28px 60px -20px rgba(0, 0, 0, .75);
    --edge: inset 0 1px 0 rgba(255, 255, 255, .05);
    --band-lift: color-mix(in srgb, var(--band-hi) 50%, transparent);
    --band-glow: color-mix(in srgb, var(--brand) 12%, transparent);
    --band-shade: color-mix(in srgb, #000000 24%, transparent);
    --band-sheen: color-mix(in srgb, #FFFFFF 3%, transparent);
    --band-grid: color-mix(in srgb, #FFFFFF 3.5%, transparent);
    --band-grid-major: color-mix(in srgb, #FFFFFF 6%, transparent);
    --glass: color-mix(in srgb, #FFFFFF 6%, transparent);
    --rail-on: color-mix(in srgb, #FFFFFF 8%, transparent); --rail-well: color-mix(in srgb, #000000 18%, transparent);
    --rail-sheen: color-mix(in srgb, #FFFFFF 4%, transparent);
    --rail-glow: color-mix(in srgb, var(--navy-hi) 25%, transparent);
    --rail-grid: color-mix(in srgb, #FFFFFF 3%, transparent);
    --chart-1: #3987E5; --chart-2: #D95926;
    --seq-1: #184F95; --seq-2: #256ABF; --seq-3: #3987E5; --seq-4: #6DA7EC; --seq-5: #9EC5F4;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0E14; --surface: #141922; --surface-2: #1A202B; --sunk: #0F131A;
  --ink: #ECEFF4; --muted: #A9B2C2; --faint: #8891A2;
  --line: #2A313D; --line-strong: #414A59;
  --navy: #0A143C; --navy-ink: #FFFFFF; --navy-sub: #B6BFDD; --navy-hi: #1B2A6B;
  --band: #0A143C; --band-hi: #1D3AAE; --band-sub: #E5E9FB;
  --primary: #AFC0FF; --primary-hover: #C6D2FF; --primary-ink: #0A143C;
  --brand: #F0575D;
  --danger: #F58289; --danger-soft: #3A1B1E; --danger-ink: #2A0C0F;
  --ok: #57C989; --ok-soft: #14301F;
  --warn: #F2A94A; --warn-soft: #33250F;
  --info: #86ADFF; --info-soft: #162444;
  --focus: #8FB0FF;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 1px 2px rgba(0, 0, 0, .45), 0 14px 32px -14px rgba(0, 0, 0, .65);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 28px 60px -20px rgba(0, 0, 0, .75);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .05);
  --band-lift: color-mix(in srgb, var(--band-hi) 50%, transparent);
  --band-glow: color-mix(in srgb, var(--brand) 12%, transparent);
  --band-shade: color-mix(in srgb, #000000 24%, transparent);
  --band-sheen: color-mix(in srgb, #FFFFFF 3%, transparent);
  --band-grid: color-mix(in srgb, #FFFFFF 3.5%, transparent);
  --band-grid-major: color-mix(in srgb, #FFFFFF 6%, transparent);
  --glass: color-mix(in srgb, #FFFFFF 6%, transparent);
  --rail-on: color-mix(in srgb, #FFFFFF 8%, transparent); --rail-well: color-mix(in srgb, #000000 18%, transparent);
  --rail-sheen: color-mix(in srgb, #FFFFFF 4%, transparent);
  --rail-glow: color-mix(in srgb, var(--navy-hi) 25%, transparent);
  --rail-grid: color-mix(in srgb, #FFFFFF 3%, transparent);
  --chart-1: #3987E5; --chart-2: #D95926;
  --seq-1: #184F95; --seq-2: #256ABF; --seq-3: #3987E5; --seq-4: #6DA7EC; --seq-5: #9EC5F4;
}