/* Design tokens of the "Bright" direction (D1 round 2, approved). Every value is copied from the mockups' style blocks.
   The brand colour is ONE variable: --brand below. Every derived colour is a color-mix from it, so a new brand moves them all.
   To re-brand at run time, set --brand on the root element with style.setProperty (CSSOM is allowed under the page CSP).
   Fonts are self-hosted (public/fonts, SIL OFL 1.1); the paths are relative so the versioned /static/<version>/ path works. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-wght-normal.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: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-tight-latin-wght-normal.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;
}

:root {
  /* Brand: the one variable, and what follows from it */
  --brand: #0B6B7C;
  --brand-hover: color-mix(in srgb, var(--brand) 84%, #000);
  --brand-top: color-mix(in srgb, var(--brand) 88%, #fff);
  --brand-soft: color-mix(in srgb, var(--brand) 8%, #fff);
  --brand-tint: color-mix(in srgb, var(--brand) 15%, #fff);
  --brand-line: color-mix(in srgb, var(--brand) 32%, #fff);
  --brand-glow: color-mix(in srgb, var(--brand) 28%, transparent);
  --brand-light: color-mix(in srgb, var(--brand) 45%, #fff);

  /* Ink (text). --ink-4 is for parts that are not text (a switch track, an icon): it is under 4.5 on purpose and tests keep it out of color. */
  --ink: #16181D;
  --ink-2: #4A515C;
  --ink-3: #5F6672;
  --ink-4: #8A909A;
  --ink-5: #9AA1AC;
  --ink-logo: #6B717C;

  /* Surfaces and lines */
  --bg: #F4F6F9;
  --bg-list: #F8F9FB;
  --bg-page-from: #F7F8FC;
  --bg-page-to: #F2F4F8;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --surface-3: #F7F8FA;
  --field-off: #F6F7F9;                                        /* a disabled field's background */
  --surface-4: #FBFCFD;
  --side-top: #FBFCFE;
  --side-bottom: #F3F5FA;
  --nav-hover: #ECEFF6;
  --seg-track: #ECEFF4;
  --hair: rgba(22, 24, 29, .06);
  --hair-2: rgba(22, 24, 29, .08);
  --line: #E1E4EA;
  --line-field: #CDD2DA;
  --line-soft: #F0F2F5;
  --line-axis: #E8EBF0;
  --scrim: rgba(22, 24, 29, .32);
  --toast-bg: rgba(22, 24, 29, .92);
  --tab-from: #24272E;
  --tab-to: #16181D;

  /* Status chips: the result of a rule (pass, fail, unknown) and plain information */
  --pass-bg: #E7F5EE;
  --pass-ink: #17663F;
  --fail-bg: #FCEDE5;
  --fail-ink: #9A3F17;
  --unknown-bg: #FBF4E4;
  --unknown-ink: #7A5A12;
  --info-bg: #EEF0F4;
  --info-ink: #4A515C;
  --ok-dot: #3BA372;
  --ok-halo: #DFF3E8;
  --ok-mark: #9BE3BE;

  /* The work colours (approved 06/11, docs/mockups/2026-11-06-desk-color.html): one per stage of a deal, each a soft fill, a mid tone
     (a bar, a dot) and an ink for text on the fill; and the sky of the balances. */
  --status-new-bg: #ECE9FC;
  --status-new-mid: #8F82EA;
  --status-new-ink: #4B3FA8;
  --status-missing-bg: #FBF1D3;
  --status-missing-mid: #EBC25A;
  --status-missing-ink: #6E5210;
  --status-ready-bg: #DFF0E5;
  --status-ready-mid: #62B587;
  --status-ready-ink: #1C6641;
  --status-declined-bg: #FBE4DB;
  --status-declined-mid: #E58C6C;
  --status-declined-ink: #93391A;
  --status-sky-bg: #DFEEF6;
  --status-sky-ink: #1F5F80;

  /* The side menu (approved 06/11): deep grey in the light theme, the main screen stays light. Its own focus ring, since the brand's
     is too dark to see on the grey. */
  --side-bg: #2B3038;
  --side-ink: #D3D8DF;
  --side-ink-2: #B4BBC6;
  --side-ink-3: #959CA7;
  --side-on-bg: rgba(255, 255, 255, .08);
  --side-on-ink: #FFFFFF;
  --side-card: rgba(255, 255, 255, .06);
  --side-link: #6FD0DD;
  --side-focus: #6FD0DD;

  /* The five data tints (a tile is a soft gradient from..to, with its ink). The first follows the brand. */
  --tint-brand-from: var(--brand-soft);
  --tint-brand-to: var(--brand-tint);
  --tint-brand-ink: var(--brand);
  --tint-green-from: #F0FAF5;
  --tint-green-to: #E0F3E9;
  --tint-green-ink: #17663F;
  --tint-violet-from: #F6F3FD;
  --tint-violet-to: #EBE5FB;
  --tint-violet-ink: #5B3FA8;
  --tint-orange-from: #FEF4EE;
  --tint-orange-to: #FBE6DA;
  --tint-orange-ink: #9A3F17;
  --tint-amber-from: #FDF8EC;
  --tint-amber-to: #F8EED6;
  --tint-amber-ink: #7A5A12;
  --bar-neg-from: #FBE6DA;
  --bar-neg-to: #F6D2BF;

  /* Radii */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 16px;
  --r-3xl: 20px;
  --r-pill: 999px;

  /* Shadows */
  --sh-ghost: 0 1px 2px rgba(22, 24, 29, .05);
  --sh-ghost-hover: 0 4px 12px rgba(22, 24, 29, .07);
  --sh-nav: 0 1px 2px rgba(22, 24, 29, .06), 0 4px 12px rgba(22, 24, 29, .05);
  --sh-seg: 0 1px 3px rgba(22, 24, 29, .10);
  --sh-card: 0 1px 2px rgba(22, 24, 29, .04), 0 6px 20px rgba(22, 24, 29, .05);
  --sh-card-hover: 0 1px 2px rgba(22, 24, 29, .05), 0 12px 32px color-mix(in srgb, var(--brand) 9%, transparent);
  --sh-card-lg: 0 1px 2px rgba(22, 24, 29, .04), 0 12px 36px rgba(22, 24, 29, .07);
  --sh-dialog: 0 1px 2px rgba(22, 24, 29, .04), 0 24px 60px rgba(22, 24, 29, .18);
  --sh-toast: 0 16px 40px rgba(22, 24, 29, .25);
  --sh-tile-hover: 0 8px 20px rgba(22, 24, 29, .08);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .8);
  --sh-inset-hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --sh-primary: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 14px var(--brand-glow);
  --sh-primary-hover: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 22px color-mix(in srgb, var(--brand) 36%, transparent);
  --sh-ring: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
  --sh-select: 0 0 0 3px color-mix(in srgb, var(--brand) 8%, transparent), 0 8px 22px color-mix(in srgb, var(--brand) 8%, transparent);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-pop: cubic-bezier(.3,1.5,.5,1);
  --ease-grow: cubic-bezier(.2,.8,.2,1);
  --ease-draw: cubic-bezier(.65,0,.35,1);
  --t-press: .12s;
  --t-hover: .18s;
  --t-ui: .2s;
  --t-lift: .25s;
  --t-enter: .45s;
  --t-rise: .55s;
  --t-grow: .8s;

  /* Type: Inter 14/1.5 for text, Inter Tight 600 for headings and big numbers */
  --font-body: Inter, system-ui, sans-serif;
  --font-head: 'Inter Tight', Inter, sans-serif;
  --fs-xs: 11.5px;
  --fs-sm: 12px;
  --fs-sm-2: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-h3: 16px;
  --fs-h1: 20px;
  --fs-num: 21px;
  --fs-h2: 24px;
}