/* The site's colours, in both appearances. A page is light or dark as its reader chose in Settings
   (`data-appearance` on its root element, written by the server: packages/web/src/pages.ts), else
   as their device is set (`auto`). Every colour holds its two values, light first (`light-dark()`),
   and the root's `color-scheme` picks one — the browser's own controls and scrollbars with it. */
:root{color-scheme:light dark;}
:root[data-appearance="light"]{color-scheme:light;}
:root[data-appearance="dark"]{color-scheme:dark;}

/* What light-dark() cannot hold — an opacity, a filter — goes to one appearance through these:
   `opacity:var(--in-dark) .5` is .5 in dark and void (the property's initial value) in light. Each
   is empty in its own appearance and `initial` in the other, which voids the declaration. */
:root{--in-light: ;--in-dark:initial;}
:root[data-appearance="dark"]{--in-light:initial;--in-dark: ;}
@media (prefers-color-scheme:dark){:root:not([data-appearance="light"]){--in-light:initial;--in-dark: ;}}

/* The app's chrome — every page but a journey's story, which wears the journey's own theme. */
:root{
  --bg:light-dark(#f1f5f9,#0f1528);          /* the page */
  --surface:light-dark(#ffffff,#171f38);     /* a card on it */
  --surface2:light-dark(#f1f5f9,#212b4a);    /* a field or a button on a card */
  --line:light-dark(rgba(15,23,42,.12),rgba(255,255,255,.10));
  --fg:light-dark(#0f172a,#eef2fb);
  --muted:light-dark(#5b6b82,#93a0c2);
  --bar-bg:light-dark(rgba(255,255,255,.92),rgba(15,21,40,.92));   /* the sticky header, over the page */
  --accent:#2fe3c4;                          /* a fill, under --accent-ink */
  --accent-ink:#052b25;
  --accent-line:light-dark(#0b7f6c,#2fe3c4); /* the accent as text, a border or a focus ring */
  --danger:light-dark(#c81e30,#ff5a6a);
  --live:#3fe08a;                            /* a journey on the road: a fill, under --live-ink */
  --live-ink:#04140c;
  --pre:#93a0c2;                             /* a journey to come: a fill, under --pre-ink */
  --pre-ink:#0f1528;
}

/* A journey's colours (--p, --h) as text, an icon or a fine line on a panel, wherever an element
   names them — a journey's story on its root, a journey's card on its sketch: themselves on a dark
   panel; on a light one, held at an OKLCH lightness of --ink-l at most, which reads at 5:1 or more
   on white whatever the colour. The highlight's accents on a light panel are the primary's: a
   highlight is a light colour (yellow, teal, lime), which darkened turns to mud. */
:root,.journey-ink{
  --ink-l:.5;
  --p-ink:light-dark(oklch(from var(--p) min(l, var(--ink-l)) c h),var(--p));
  --h-ink:light-dark(var(--p-ink),var(--h));
}