@import url('fonts.css');

/* ==========================================================================
   peopleindicator.com — design tokens

   Every app on this host loads this file, and the five print stylesheets
   re-declare the same values as literals because Dompdf supports no custom
   properties. So a value changed here is a value changed in every app and
   silently out of step with print. Add tokens; think hard before editing one.

   The palette is the logo's. Navy ("people") is the ink: headings, body text,
   the sidebar. Blue ("indicator") is the one signal colour: actions, links,
   focus, the line on a chart. Slate (".com") is for what can be skipped.
   Alert red appears only where the reader must look: a factor outside the
   target range, a validity warning, an error. Shapes are rounded, like the
   letters; surfaces are cool white, lifted by a soft navy shadow.
   ========================================================================== */

:root {
  --navy:         #13294b;
  --blue:         #1a7fe8;
  --blue-soft:    #8ec1f5;
  --slate:        #8a98a8;

  --paper:        #f7f9fc;
  --paper-raised: #ffffff;
  --paper-sunk:   #eef2f7;

  --ink:          #13294b;
  --ink-muted:    #4a5b70;
  --ink-faint:    #8a98a8;

  --brand:        #1a7fe8;
  --brand-deep:   #0f63bd;
  --brand-wash:   #eaf3fe;

  --alert:        #d9483b;
  --alert-wash:   #fdecea;

  --mist:         #dde4ec;
  --mist-strong:  #c3cedb;
  --sand:         #eef2f7;

  --display: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.3125rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.375rem;
  --t-3xl:  3.125rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius:      8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(19, 41, 75, 0.06), 0 1px 3px rgba(19, 41, 75, 0.08);
  --shadow-md: 0 4px 12px rgba(19, 41, 75, 0.08), 0 12px 32px rgba(19, 41, 75, 0.08);

  --measure: 62ch;
  --shell:   1180px;

  --ease: cubic-bezier(0.32, 0.72, 0.3, 1);

  /* Old names, kept for one release so a stray reference still resolves. */
  --petrol:      var(--brand);
  --petrol-lift: var(--brand-deep);
  --petrol-wash: var(--brand-wash);
  --clay:        var(--alert);
  --clay-wash:   var(--alert-wash);
}