/* Harbor Ledger design tokens. The only file with colour values: every rule in style.css
   refers to these names, so the dark theme is nothing more than the second block below. */

:root {
  color-scheme: light;

  /* Neutrals */
  --bg: #f2f4f6;
  --surface: #ffffff;
  --surface-sunken: #e9edf1;
  --surface-subtle: #fbfcfd;
  --divider: #eef1f4;
  --border: #d9dfe5;
  --border-strong: #b7c1cb;
  --ink: #0e1a28;
  --ink-2: #44515f;
  --ink-3: #5e6a77;
  --on-ink: #ffffff;
  --disabled-ink: #8a95a1;

  /* Brand — the one accent. Never used for status. */
  --primary: #0a5a8a;
  --primary-pressed: #084669;
  --primary-soft: #e1edf5;
  --on-primary: #ffffff;
  --scrim: rgba(14, 26, 40, 0.45);

  /* Status — the only saturated colours, and only ever for status. */
  --arrived: #1b7347;
  --arrived-pressed: #155c38;
  --arrived-soft: #e2f1e8;
  --arrived-text: #14583a;
  --on-arrived: #ffffff;
  --waiting: #e9edf1;
  --waiting-border: #b7c1cb;
  --waiting-soft: #edf0f3;
  --waiting-text: #44515f;
  --problem: #d64535;
  --problem-soft: #fbe8e6;
  --problem-text: #a1281c;
  --on-problem: #ffffff;
  /* "Check": what a person still has to compare with the paper — an empty field in the
     review form, or a whole order nobody has checked yet. Never an order status. */
  --check: #c77700;
  --check-soft: #fdf1dd;
  --check-text: #8a4b00;

  /* Snackbar: ink in the light theme, inverted in the dark one so it still stands out. */
  --snackbar-bg: #0e1a28;
  --snackbar-ink: #e8edf2;
  --snackbar-action: #5fb0e5;

  /* The photo panel and the viewer stay dark in both themes, like a lightbox. */
  --photo-panel: #1d2733;
  --photo-ink: #ffffff;
  --photo-ink-muted: #a9b5c1;
  --photo-control: rgba(255, 255, 255, 0.12);
  --photo-control-hover: rgba(255, 255, 255, 0.22);
  --photo-dim: rgba(14, 26, 40, 0.55);
  --viewer-bg: #05090d;
  --viewer-control: rgba(14, 26, 40, 0.72);

  /* Logo mark and the paper in the "photograph the title page" illustration. */
  --logo-bg: #0e1a28;
  --logo-on: #3fbf7f;
  --logo-off: #46586b;
  --paper: #fbfaf6;
  --paper-line-strong: #9aa4ae;
  --paper-line: #cbd2d8;

  /* Type */
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing, 4-pt grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --gutter: 16px;

  /* Radii */
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Elevation */
  --e1: 0 1px 2px rgba(14, 26, 40, 0.06);
  --e2: 0 6px 20px rgba(14, 26, 40, 0.18);
  --e3: 0 24px 48px rgba(14, 26, 40, 0.22);
  --e-segment: 0 1px 2px rgba(14, 26, 40, 0.1);
  --e-bar: 0 -6px 20px rgba(14, 26, 40, 0.06);
  --e-paper: 0 2px 6px rgba(14, 26, 40, 0.1);
  --e-photo: 0 8px 20px rgba(0, 0, 0, 0.35);

  /* What steps back without leaving: the cards a search does not point at. */
  --dim-opacity: 0.45;

  /* Motion */
  --t-press: 150ms;
  --t-expand: 200ms;
  --t-sheet: 250ms;

  /* The strip of a test stand (stand.js). No stand, no strip: nothing is pushed down. */
  --stand-height: 0px;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
  }
}

/* A test stand: `data-stand` is set by stand.js when the server says it is one. The strip takes
   this much of the top of every screen — whatever is placed against the top of the window
   adds it — and the logo's "arrived" squares turn red, the same as the stand's icon. */
:root[data-stand='test'] {
  --stand-height: calc(42px + env(safe-area-inset-top));
  --logo-on: #f0685a;
}

/* On a phone the strip grows with its buttons, which have to be full touch targets. */
@media (max-width: 599px) {
  :root[data-stand='test'][data-stand-refresh],
  :root[data-stand='test'][data-stand-features] {
    --stand-height: calc(58px + env(safe-area-inset-top));
  }
}

/* Dark. `data-theme` is always set, before the first paint, by theme-boot.js: the person's own
   choice if they made one with the switch in the top bar, otherwise what the system asks for. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0b131c;
  --surface: #121c27;
  --surface-sunken: #1a2633;
  --surface-subtle: #0f1822;
  --divider: #1e2a37;
  --border: #263443;
  --border-strong: #3a4757;
  --ink: #e8edf2;
  --ink-2: #a9b5c1;
  --ink-3: #8794a1;
  --on-ink: #0b131c;
  --disabled-ink: #5e6a77;

  --primary: #5fb0e5;
  --primary-pressed: #8cc6ee;
  --primary-soft: #16324a;
  --on-primary: #0b131c;
  --scrim: rgba(3, 7, 11, 0.62);

  --arrived: #3fbf7f;
  --arrived-pressed: #63cf98;
  --arrived-soft: #12301f;
  --arrived-text: #6fd6a2;
  --on-arrived: #0b131c;
  --waiting: #1a2633;
  --waiting-border: #3a4757;
  --waiting-soft: #1a2633;
  --waiting-text: #a9b5c1;
  --problem: #f0685a;
  --problem-soft: #3a1a17;
  --problem-text: #f79a8f;
  /* The bar inside a problem square stays white: it is the shape cue, not text. */
  --on-problem: #ffffff;
  --check: #f2a33a;
  --check-soft: #3a2a10;
  --check-text: #f2a33a;

  --snackbar-bg: #e8edf2;
  --snackbar-ink: #0e1a28;
  --snackbar-action: #0a5a8a;

  --photo-panel: #1a2633;
  --logo-bg: #1a2633;
  --paper: #d9dcd6;
  --paper-line-strong: #6f7a85;
  --paper-line: #a3acb5;

  --e1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --e2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --e3: 0 24px 48px rgba(0, 0, 0, 0.55);
  --e-segment: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e-bar: 0 -6px 20px rgba(0, 0, 0, 0.3);
  --e-paper: 0 2px 6px rgba(0, 0, 0, 0.35);
}