/* =============================================================================
   Daftari design system: tokens.
   GENERATED by BRANDING/Design_Guide/system/build_system.py from the brand
   palette (BRANDING/ELEMENTS/COLOURS). Do not edit: change the script.

   Components use these roles, never a colour name and never a hex. The light
   and dark blocks are written by one function, so the system preference and the
   reader's choice ([data-theme]) always produce the same palette.
   ============================================================================= */

:root {
  color-scheme: light dark;
  --serif: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-display: 2.125rem;  /* 34 px · front door only */
  --t-title: 1.375rem;  /* 22 px · page title */
  --t-section: 1.0625rem;  /* 17 px · section heading */
  --t-body: .90625rem;  /* 14.5 px · text */
  --t-table: .84375rem;  /* 13.5 px · tables and forms */
  --t-code: .78125rem;  /* 12.5 px · codes */
  --t-small: .78125rem;  /* 12.5 px · form labels and small print, the size codes are set in */
  --t-label: .6875rem;  /* 11 px · labels, table heads and pills, always in capitals */
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 2.5rem;
  --s8: 3rem;
  --radius: 3px;
  --shadow: 0 1px 2px rgb(0 0 0 / 6%);  /* the only shadow: a statement lifted off the page */
}

/* Light: the default, the front door, every printed page. */
:root, .theme-light {
  --bg: #FBF9F5;
  --panel: #F0ECE4;
  --raised: #F4F1EB;
  --field: #FFFFFF;
  --line: #D9D3C7;
  --line-soft: #E7E2D9;
  --rule: #8A857D;
  --ink: #22262B;
  --dim: #434343;
  --muted: #6B6760;
  --link: #2E4A7D;
  --bar: #25324F;
  --on-bar: #FFFFFF;
  --bar-dim: #D8DADF;
  --mark: #E9B872;
  --accent: #8A5418;
  --on-accent: #FFFFFF;
  --good: #2C6B52;
  --warn: #8A6510;
  --bad: #8A3324;
  --chart-1: #25324F;
  --chart-2: #B07430;
  --chart-3: #6B6760;
}

/* Dark: remapped, not inverted. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161A;
    --panel: #1A1D22;
    --raised: #1E2227;
    --field: #0F1014;
    --line: #2A2F36;
    --line-soft: #22262C;
    --rule: #5F646C;
    --ink: #E8E6E3;
    --dim: #BEBFC1;
    --muted: #8B9098;
    --link: #9DB1DC;
    --bar: #1B2338;
    --on-bar: #FFFFFF;
    --bar-dim: #D1D3D7;
    --mark: #E9B872;
    --accent: #C98A3C;
    --on-accent: #14161A;
    --good: #6CAE7C;
    --warn: #CFA844;
    --bad: #D4796C;
    --chart-1: #9DB1DC;
    --chart-2: #E0A85E;
    --chart-3: #8B9098;
  }
}
:root[data-theme="dark"], .theme-dark {
  --bg: #14161A;
  --panel: #1A1D22;
  --raised: #1E2227;
  --field: #0F1014;
  --line: #2A2F36;
  --line-soft: #22262C;
  --rule: #5F646C;
  --ink: #E8E6E3;
  --dim: #BEBFC1;
  --muted: #8B9098;
  --link: #9DB1DC;
  --bar: #1B2338;
  --on-bar: #FFFFFF;
  --bar-dim: #D1D3D7;
  --mark: #E9B872;
  --accent: #C98A3C;
  --on-accent: #14161A;
  --good: #6CAE7C;
  --warn: #CFA844;
  --bad: #D4796C;
  --chart-1: #9DB1DC;
  --chart-2: #E0A85E;
  --chart-3: #8B9098;
}

/* Paper is always light: ink on white. */
@media print {
  :root {
    --bg: #FBF9F5;
    --panel: #F0ECE4;
    --raised: #F4F1EB;
    --field: #FFFFFF;
    --line: #D9D3C7;
    --line-soft: #E7E2D9;
    --rule: #8A857D;
    --ink: #22262B;
    --dim: #434343;
    --muted: #6B6760;
    --link: #2E4A7D;
    --bar: #25324F;
    --on-bar: #FFFFFF;
    --bar-dim: #D8DADF;
    --mark: #E9B872;
    --accent: #8A5418;
    --on-accent: #FFFFFF;
    --good: #2C6B52;
    --warn: #8A6510;
    --bad: #8A3324;
    --chart-1: #25324F;
    --chart-2: #B07430;
    --chart-3: #6B6760;
    --bg: #FFFFFF; --ink: #000000; --dim: #000000; --rule: #000000;
  }
}