/* Shared tokens, menu bar and buttons for the site and the admin portal. */
:root {
  --platinum: #e4e5e8;
  --snow: #fafafb;
  --graphite: #1f2430;
  --slate: #5b6372;
  --aqua: #1e6bff;
  --sun: #ffb020;

  --bg: var(--platinum);
  --surface: var(--snow);
  --ink: var(--graphite);
  --muted: var(--slate);
  --line: rgb(31 36 48 / 0.12);
  --line-strong: rgb(31 36 48 / 0.22);
  --accent: var(--aqua);
  --on-accent: #fff;
  --ok: #17803d;
  --danger: #c52a2a;
  --bar: rgb(250 250 251 / 0.72);
  --focus: 0 0 0 3px rgb(30 107 255 / 0.45);

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --menubar-h: 36px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181e;
    --surface: #1e222a;
    --ink: #eceef2;
    --muted: #9aa3b2;
    --line: rgb(236 238 242 / 0.1);
    --line-strong: rgb(236 238 242 / 0.2);
    --accent: #4d8bff;
    --ok: #4cc07a;
    --danger: #ff6b6b;
    --bar: rgb(30 34 42 / 0.72);
    --focus: 0 0 0 3px rgb(77 139 255 / 0.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--menubar-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- menu bar ---- */
.menubar {
  position: sticky; top: 0; z-index: 50;
  height: var(--menubar-h);
  display: flex; align-items: center; gap: 4px;
  padding: 0 12px;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.menubar a, .menubar button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 9px;
  border: 0; border-radius: 6px; background: none;
  color: inherit; font: inherit; text-decoration: none; cursor: default;
}
.menubar a:hover, .menubar button:hover, .menubar [aria-current="page"] { background: rgb(127 127 127 / 0.16); }
.menubar .brand { font-weight: 700; letter-spacing: -0.01em; }
.menubar .brand svg { width: 16px; height: 16px; }
.menubar .spacer { flex: 1; }
.menubar .clock { padding: 0 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 10px;
  font: 600 15px/1 var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 1px 2px rgb(0 0 0 / 0.2);
}
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 88%, black); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { background: rgb(127 127 127 / 0.1); }
.btn-quiet[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, transparent); }
.btn-danger:hover { background: color-mix(in oklab, var(--danger) 10%, transparent); }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}