/*
 * The one theme file. Every colour in the app comes from here.
 * Names mirror the Hub's design tokens (tightline-hub/web/src/styles/tokens.css): plumb, plaster,
 * board, rebar, chalk, flag. The Hub look is being reworked, so this is the neutral version;
 * restyle by editing only this file.
 */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  color-scheme: light dark;

  /* Brand */
  --plumb: #000000;
  --plaster: #e7e8e4;
  --board: #f6f6f4;
  --rebar: #4b4f4a;
  --chalk: #1d5fd1;
  --flag: #e5196b; /* non-text accents only */

  /* Status */
  --status-on-target: #1f6b3a;
  --status-watch: #7a4a00;
  --status-act-now: #b3124f;
  --status-verify: var(--chalk);
  --status-grey: var(--rebar);

  /* Surfaces and text */
  --surface-page: var(--plaster);
  --surface-card: var(--board);
  --text: var(--plumb);
  --text-muted: var(--rebar);
  --link: var(--chalk);
  --rule: var(--rebar);
  --focus-ring: var(--chalk);
  --accent-leak: var(--flag);
  --on-accent: var(--board);
  --scrim: color-mix(in srgb, var(--plumb) 45%, transparent);

  /* Map */
  --map-bg: var(--board);
  --cell: var(--plumb);
  --cell-text: var(--plaster);
  --bubble-eatable: var(--status-on-target);
  --bubble-open: var(--chalk);
  --bubble-sealed: color-mix(in srgb, var(--rebar) 30%, var(--board));
  --bubble-sealed-line: var(--rebar);
  --bubble-text: var(--board);
  --bubble-sealed-text: var(--text);
  --lane-a-tint: color-mix(in srgb, var(--owner-a) 5%, transparent);
  --lane-a-tint-me: color-mix(in srgb, var(--owner-a) 12%, transparent);
  --lane-c-tint: color-mix(in srgb, var(--owner-c) 5%, transparent);
  --lane-c-tint-me: color-mix(in srgb, var(--owner-c) 12%, transparent);
  --lane-seam-tint: color-mix(in srgb, var(--rebar) 11%, transparent);
  --lane-seam-line: color-mix(in srgb, var(--rebar) 40%, transparent);
  --bubble-container: color-mix(in srgb, var(--bubble-open) 60%, var(--board));
  --bubble-container-text: var(--plumb);
  --glossary-link: var(--chalk);

  /* Deadline rings: calm to warm to urgent; overdue is the urgent colour, thicker and pulsing */
  --ring-calm: var(--status-on-target);
  --ring-warm: var(--status-watch);
  --ring-urgent: var(--status-act-now);
  --ring-overdue: var(--status-act-now);

  /* Owner chips */
  --owner-a: var(--chalk);
  --owner-c: var(--status-watch);
  --owner-ac: var(--rebar);

  /* Type */
  --font-sans: 'Archivo Variable', 'Archivo', system-ui, sans-serif;

  /* Layout */
  --gutter: 16px;
  --content-max: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --status-on-target: #5cc98a;
    --status-watch: #f0b44c;
    --status-act-now: #ff6fa0;
    --status-verify: #7fa8ff;
    --status-grey: #b4b8b2;

    --surface-page: var(--plumb);
    --surface-card: #1a1a1a;
    --text: var(--plaster);
    --text-muted: #b4b8b2;
    --link: #7fa8ff;
    --rule: #b4b8b2;
    --focus-ring: #7fa8ff;
    --on-accent: var(--plumb);

    --map-bg: #111111;
    --cell: var(--plaster);
    --cell-text: var(--plumb);
    --bubble-open: #7fa8ff;
    --bubble-container: color-mix(in srgb, #7fa8ff 55%, #111111);
    --bubble-container-text: var(--plaster);
    --glossary-link: #7fa8ff;
    --bubble-sealed: color-mix(in srgb, #b4b8b2 22%, #111111);
    --bubble-sealed-line: #b4b8b2;
    --bubble-text: var(--plumb);
    --owner-a: #7fa8ff;
    --owner-c: #f0b44c;
    --owner-ac: #b4b8b2;
  }
}