/* Slate design tokens. No accent colour; meaning never depends on hue.
   Light is the default. Dark follows the system unless data-theme says otherwise
   (data-theme = light | dark, set before first paint by /js/theme.js).
   Contrast (WCAG): Ink on Paper 15.8:1 light, 16.5:1 dark. Ink 2 on Paper 5.6:1 light, 5.5:1 dark;
   on Paper 2 tiles 5.1:1 and 5.0:1. Rule is decorative; Rule strong (3:1 or better) is for control borders. */
:root {
  color-scheme: light dark;
  --paper: #ECECE9;
  --paper-2: #E2E2DE;
  --rule: #C9C9C4;
  --rule-strong: #7D7F82;
  --ink-2: #5B5D60;
  --ink: #111213;
  --radius-tile: 18px;
  --hairline: 1px;
  --ease: cubic-bezier(.2, .7, .2, 1);   /* the one easing curve */
  --dur-1: 140ms;  /* hover, press */
  --dur-2: 240ms;  /* drags, reorders, theme change */
  --dur-3: 360ms;  /* panels, view changes */
  --font-display: "Funnel Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B0B0C; --paper-2: #161618; --rule: #262729; --rule-strong: #6A6C70; --ink-2: #85878B; --ink: #ECEBE7;
  }
}
:root[data-theme="dark"] {
  --paper: #0B0B0C; --paper-2: #161618; --rule: #262729; --rule-strong: #6A6C70; --ink-2: #85878B; --ink: #ECEBE7;
}

/* Theme switch: every element flips in the same frame so nothing lags behind. theme.js adds .theme-flip around the
   switch, which turns off the per-element colour transitions, and the browser crossfades the whole page in one go. */
html.theme-flip, html.theme-flip *, html.theme-flip *::before, html.theme-flip *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease-out; mix-blend-mode: normal; }

/* Theme switch (rendered by theme.js into [data-theme-toggle]) */
.theme-toggle {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
  background: transparent; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 999px;
  padding: 7px 13px; min-height: 32px; cursor: pointer; white-space: nowrap; width: auto; margin: 0;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[data-theme-toggle] { display: inline-flex; align-items: center; }
.bar > [data-theme-toggle] { margin-left: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Date and time in the header (theme.js) */
.bar-clock { font-family: var(--font-mono); font-weight: 300; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: pre; margin-left: auto; font-variant-numeric: tabular-nums; }
.bar > .crumbs + .bar-clock, .bar > .bar-clock { flex: none; }
@media (max-width: 720px) { .bar-clock { display: none; } }