/* Base: colours, type and resets shared by every page.
   Change a colour or font here and the whole app follows. */
:root {
  /* Crimson and gold */
  --crimson: #8f1220;
  --crimson-deep: #5c0a12;
  --crimson-ink: var(--crimson); /* crimson used as words; lighter in dark mode */
  --gold: #d4a72c;
  --gold-bright: #f0cf6a;

  /* Clean light surfaces */
  --page: #f2f2f7;
  --panel: #ffffff;
  --ink: #1c1c1e;
  --ink-soft: #6e6e73;
  --line: #e3e3e8;
  --fill: #f2f2f7;
  --fill-strong: #e4e4ea;
  --panel-hover: #fafafc;
  --focus-fill: #fffdf5;
  --line-strong: #c4c4c9;
  --gold-soft: #f6e9c3;
  --gold-ink: #6b4e00;
  --on-crimson: #ffffff;
  --on-crimson-soft: rgba(255, 255, 255, 0.72);
  --ok: #34a853;
  --error: #d92d20;
  /* Marks drawn over a pump inspection (highlighter, pen, circle): the same
     in dark mode and on paper. */
  --mark-yellow: #ffd60a; --mark-green: #34c759; --mark-pink: #ff4fa3;
  --mark-red: #e5162b; --mark-blue: #1f6fe0; --mark-black: #1c1c1e;


  /* Status colours. Each status belongs to one tone (see the end of
     components.css): its soft background, its text, and its strong colour. */
  --tone-red-soft: #fbdcdf;
  --tone-red-ink: #a3101f;
  --tone-red: #c2182b;
  --tone-orange-soft: #ffe3cc;
  --tone-orange-ink: #9a4300;
  --tone-orange: #e8730c;
  --tone-amber-soft: #fdefc2;
  --tone-amber-ink: #7a5600;
  --tone-amber: #d99a00;
  --tone-green-soft: #d5f0de;
  --tone-green-ink: #17663a;
  --tone-green: #1f9d55;
  --tone-teal-soft: #cdeeee;
  --tone-teal-ink: #0b5c63;
  --tone-teal: #12a3a8;
  --tone-blue-soft: #d8e8fb;
  --tone-blue-ink: #134e8a;
  --tone-blue: #2b7fd9;
  --tone-purple-soft: #e6dcf7;
  --tone-purple-ink: #4f2a8a;
  --tone-purple: #7b4fd0;
  --tone-pink-soft: #fbdbee;
  --tone-pink-ink: #8c1c5e;
  --tone-pink: #d6409f;
  --tone-grey-soft: #e9e9ee;
  --tone-grey-ink: #6e6e73;
  --tone-grey: #a3a3a8;

  /* How things stand, used by the dashboard: act now, watch, coming, fine. */
  --alert-red: #c2182b;
  --alert-red-soft: #fbe4e6;
  --alert-amber: #c77700;
  --alert-amber-soft: #fdf0d2;
  --alert-blue: #1f6fb5;
  --alert-blue-soft: #e1eefb;
  --alert-green: #1f7a45;
  --alert-green-soft: #e0f3e7;
  --dept-sales: #8f1220;
  --dept-purchasing: #1f6fb5;
  --dept-pumps: #6a3fa0;
  --dept-fabrication: #1f7a45;
  --dept-followups: #b8860b;

  /* Charts (Trends page). Series colours checked for colour-blind safety
     (OKLab separation) against the white panel. */
  --chart-1: #b8233a;
  --chart-2: #2b7fd9;
  --chart-muted: #a3a3a8;
  --chart-grid: #e8e8ed;
  --chart-axis: #8e8e93;
  /* One hue, light to dark, for how busy a day was. */
  --heat-0: #ececf1;
  --heat-1: #f4d3d9;
  --heat-2: #e698a6;
  --heat-3: #cf5068;
  --heat-4: #a51d35;
  --heat-5: #6e0f20;

  /* The drawing tool's sheet: dark, like a drafting screen. */
  --cad-bg: #1f272d;
  --cad-grid: #334049;
  --cad-grid-major: #46555f;
  --cad-ink: #d7e0e5;
  --cad-selected: #35aaff;
  --cad-draft: #ffb14a;
  --cad-snap: #55ff9a;
  --cad-axis-x: #733a3a;
  --cad-axis-y: #3c6b47;

  /* The device's own font (San Francisco on Apple, Segoe on Windows). */
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-code: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 2.125rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  --radius: 12px;
  --radius-small: 10px;
}

/* ----- Dark mode -----
   Chosen in the side menu (Light, Dark or Auto = follow the computer). The
   same crimson and gold on dark surfaces; every tone has a dark soft
   background and a light ink. Chart colours were checked for colour-blind
   safety against the dark panel. Printing always uses the light colours. */
@media screen {
  :root[data-theme='dark'] {
    --crimson-ink: #ff8595;
    color-scheme: dark;
    --page: #111113; --panel: #1c1c1f; --ink: #f2f2f7; --ink-soft: #a1a1a8; --line: #2e2e34; --fill: #26262b;
    --fill-strong: #32323a; --panel-hover: #232328; --focus-fill: #2a2614; --line-strong: #4a4a52; --gold-soft: #3a2f12; --gold-ink: #f0cf6a;
    --tone-red-soft: #3f1519; --tone-red-ink: #ff9aa4; --tone-red: #e5384c;
    --tone-orange-soft: #3d2411; --tone-orange-ink: #ffb87a; --tone-orange: #f08a2c;
    --tone-amber-soft: #3a2f0c; --tone-amber-ink: #f6cd55; --tone-amber: #e2a710;
    --tone-green-soft: #11301e; --tone-green-ink: #78d9a0; --tone-green: #2fb56a;
    --tone-teal-soft: #0e3133; --tone-teal-ink: #6ad6d9; --tone-teal: #1fb8bd;
    --tone-blue-soft: #12263f; --tone-blue-ink: #95c4ff; --tone-blue: #4a95ea;
    --tone-purple-soft: #261c3e; --tone-purple-ink: #c7adff; --tone-purple: #9a74ea;
    --tone-pink-soft: #3b1530; --tone-pink-ink: #ff9ad6; --tone-pink: #e45bb2;
    --tone-grey-soft: #2a2a30; --tone-grey-ink: #a1a1a8; --tone-grey: #6e6e75;
    --alert-red: #e5384c; --alert-red-soft: #3f1519; --alert-amber: #e2a710; --alert-amber-soft: #3a2f0c;
    --alert-blue: #4a95ea; --alert-blue-soft: #12263f; --alert-green: #2fb56a; --alert-green-soft: #11301e;
    --dept-sales: #c0263a; --dept-purchasing: #3d86d6; --dept-pumps: #8c62c9; --dept-fabrication: #2e9a5c; --dept-followups: #c99a1a;
    --chart-1: #e0566a; --chart-2: #4a8fe0; --chart-muted: #6e6e75; --chart-grid: #2e2e34; --chart-axis: #8e8e95;
    --heat-0: #26262b; --heat-1: #4a1a26; --heat-2: #7a2438; --heat-3: #ad3550; --heat-4: #e0566a; --heat-5: #ffa0ae;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }

button { font: inherit; color: inherit; }

code { font-family: var(--font-code); font-size: 0.85em; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

main:focus { outline: none; }