/* Tiempo theme. Everything brand-specific lives here so it can be swapped.
   Palette from the logo pack (Jordan, 26 Oct 2026): cream #FBF3E3, brown
   #533D30 and #3B2A20, green #4DFF8F, white. Jordan (2 Nov 2026): use these
   instead of black, white and mint, with a cleaner typeface. */

:root {
  --bg: #fbf3e3;
  --panel: #fffdf8;
  --side: #3b2a20;
  --side-ink: #fbf3e3;
  --side-mute: #c9b9a8;
  --ink: #2b1f17;
  --mute: #7a6a5e;
  --line: #e7dcc8;
  --row: #f5ecd9;
  --accent: #4dff8f;
  --accent-ink: #1a2a1f;
  --accent-soft: #e2ffee;
  --brown: #533d30;
  --link: #533d30;

  /* Status squares. Delivered stays a deeper green so it never reads as the accent. */
  --s-pending: #8a7a6d;
  --s-offered: #c26a00;
  --s-booked: #1d5fc4;
  --s-transit: #5b3fb8;
  --s-delivered: #1f7a3f;
  --s-cancelled: #a09488;
  --s-service: #b3261e;

  --warn: #7a4a00;
  --warn-bg: #fff1cc;
  --bad: #b3261e;
  --bad-bg: #fbe7e3;
  --ok: #1f7a3f;
  --ok-bg: #e2f3e8;

  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(43, 31, 23, 0.06), 0 6px 20px rgba(43, 31, 23, 0.06);

  --wordmark: url("/brand/wordmark-green.svg");
  --wordmark-ratio: 4652 / 1549;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1410;
    --panel: #231a15;
    --side: #140e0b;
    --side-ink: #fbf3e3;
    --side-mute: #a89684;
    --ink: #f3ebdd;
    --mute: #b4a393;
    --line: #3d3029;
    --row: #2a201a;
    --accent-ink: #1a2a1f;
    --accent-soft: #1f3a2a;
    --link: #f3ebdd;
    --s-pending: #b3a497;
    --s-offered: #f0a341;
    --s-booked: #77a8f5;
    --s-transit: #b09cf5;
    --s-delivered: #5ec684;
    --s-cancelled: #8a9096;
    --s-service: #ff8a80;
    --warn: #f3cf6b;
    --warn-bg: #3a2e12;
    --bad: #ff8a80;
    --bad-bg: #3d1d19;
    --ok: #5ec684;
    --ok-bg: #173322;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --bg: #1b1410;
  --panel: #231a15;
  --side: #140e0b;
  --side-ink: #fbf3e3;
  --side-mute: #a89684;
  --ink: #f3ebdd;
  --mute: #b4a393;
  --line: #3d3029;
  --row: #2a201a;
  --accent-ink: #1a2a1f;
  --accent-soft: #1f3a2a;
  --link: #f3ebdd;
  --s-pending: #b3a497;
  --s-offered: #f0a341;
  --s-booked: #77a8f5;
  --s-transit: #b09cf5;
  --s-delivered: #5ec684;
  --s-cancelled: #8a9096;
  --s-service: #ff8a80;
  --warn: #f3cf6b;
  --warn-bg: #3a2e12;
  --bad: #ff8a80;
  --bad-bg: #3d1d19;
  --ok: #5ec684;
  --ok-bg: #173322;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Wordmark: the logo SVG used as a mask so it takes the current colour.
   Cream on the brown top bar, brown on the cream sign-in card. */
.logo,
.nav a.logo {
  display: block;
  width: 108px;
  padding: 0;
  border: 0;
  aspect-ratio: var(--wordmark-ratio);
  background: var(--side-ink);
  -webkit-mask: var(--wordmark) no-repeat left center / contain;
  mask: var(--wordmark) no-repeat left center / contain;
  margin: 0;
}
.signin .logo { background: var(--brown); width: 132px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .signin .logo { background: var(--accent); }
}
:root[data-theme="dark"] .signin .logo { background: var(--accent); }