/* Hallmark · shape: app screen · genre: modern-minimal · theme: G2 Graphite control room (Ink, Studio as user themes) · tokens only: colour systems, type, spacing, radii, motion, the shared top bar · v2.0.0 */
/* Chiqaq GFX OS 2.0 — shared design tokens, type system and the top bar.
   Source of truth: docs/design/directions/g2-graphite.html (desktop) and
   g2-mobile.html (phone). Colour system A "Graphite control room" is the
   default; Ink and Studio stay available as user themes via
   <html data-theme="ink|studio">. This file carries ONLY custom properties,
   a few type utilities (.fig/.num/.url/.ic/.visually-hidden) and the shared
   top bar (.os2-topbar) so admin pages that still run on admin.css can load
   it without being restyled. Component styles for the dashboard live in
   /dashboard.css. */

:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.44rem; --text-2xl: 1.728rem; --text-3xl: 2.074rem; --text-base: 15px;
  --text-time: 2.2rem; --text-reading: 3.6rem; --text-strip: 1.9rem;
  --text-score: clamp(3.4rem, 15vw, 4.6rem); --text-clock: clamp(2.2rem, 9vw, 2.8rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 220ms;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-sheet: 400; --z-toast: 500;

  /* System A, Graphite control room */
  --color-paper: oklch(15% 0.006 250); --color-paper-2: oklch(19% 0.007 250); --color-paper-3: oklch(11.5% 0.005 250);
  --color-ink: oklch(95% 0.004 250); --color-ink-2: oklch(84% 0.006 250); --color-muted: oklch(70% 0.01 250);
  --color-rule: oklch(29% 0.008 250); --color-rule-2: oklch(40% 0.01 250);
  --color-accent: oklch(93% 0.005 250); --color-accent-ink: oklch(14% 0.006 250); --color-accent-soft: oklch(27% 0.008 250); --color-focus: oklch(80% 0.15 148);
  --color-live: oklch(70% 0.20 28); --color-live-soft: oklch(24% 0.06 28);
  --color-person: oklch(84% 0.13 80); --color-person-soft: oklch(26% 0.04 80);
  --color-sponsor: oklch(80% 0.14 148); --color-sponsor-soft: oklch(24% 0.045 148);
  --color-scene: oklch(78% 0.03 250); --color-scene-soft: oklch(25% 0.012 250);
  --color-ad: oklch(76% 0.02 250); --color-ad-soft: oklch(24% 0.01 250);
  --color-ok: oklch(80% 0.15 148); --color-bad: oklch(74% 0.17 25); --color-bad-soft: oklch(25% 0.045 25);
  --color-next: oklch(80% 0.15 148); --color-row-live: var(--color-paper-2); --color-row-next: transparent;
  --color-selection: color-mix(in oklab, var(--color-live) 25%, transparent);
  --color-scrim: oklch(5% 0.005 250 / 0.6);

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display); --font-figure: var(--font-display);
  --font-outlier: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --figure-weight: 600; --figure-stretch: 112%; --time-stretch: 75%;
  --radius-card: 4px; --radius-pill: 4px; --radius-chip: 4px; --rule-hair: 1px;
  --control-h: 36px; --control-h-lg: 44px;
  --tracking-display: -0.01em;
  --shadow-toast: 0 8px 24px oklch(0% 0 0 / 0.35);
}

/* System B, Ink broadcast (optional user theme) */
:root[data-theme="ink"] {
  color-scheme: dark;
  --color-paper: oklch(17% 0.040 262); --color-paper-2: oklch(21% 0.042 262); --color-paper-3: oklch(13% 0.036 262);
  --color-ink: oklch(96% 0.012 250); --color-ink-2: oklch(87% 0.03 250); --color-muted: oklch(73% 0.035 255);
  --color-rule: oklch(31% 0.05 262); --color-rule-2: oklch(42% 0.055 262);
  --color-accent: oklch(84% 0.13 80); --color-accent-ink: oklch(16% 0.04 262); --color-accent-soft: oklch(30% 0.05 75); --color-focus: oklch(86% 0.12 80);
  --color-live: oklch(75% 0.17 38); --color-live-soft: oklch(30% 0.055 50);
  --color-person: oklch(84% 0.13 80); --color-person-soft: oklch(30% 0.05 75);
  --color-sponsor: oklch(80% 0.13 150); --color-sponsor-soft: oklch(28% 0.045 150);
  --color-scene: oklch(82% 0.08 215); --color-scene-soft: oklch(28% 0.045 220);
  --color-ad: oklch(84% 0.13 80); --color-ad-soft: oklch(30% 0.05 75);
  --color-ok: oklch(80% 0.13 150); --color-bad: oklch(74% 0.17 25); --color-bad-soft: oklch(28% 0.05 25);
  --color-next: oklch(82% 0.08 215); --color-row-live: oklch(24% 0.045 55); --color-row-next: oklch(21% 0.045 230);
  --color-selection: color-mix(in oklab, var(--color-accent) 25%, transparent);
  --color-scrim: oklch(8% 0.03 262 / 0.6);
}

/* System C, Studio day (optional user theme for bright rooms) */
:root[data-theme="studio"] {
  color-scheme: light;
  --shadow-toast: 0 8px 24px oklch(30% 0.01 85 / 0.25);
  --color-paper: oklch(92.5% 0.010 85); --color-paper-2: oklch(96.5% 0.006 85); --color-paper-3: oklch(88% 0.012 85);
  --color-ink: oklch(20% 0.02 262); --color-ink-2: oklch(32% 0.02 262); --color-muted: oklch(46% 0.02 258);
  --color-rule: oklch(82% 0.012 85); --color-rule-2: oklch(70% 0.014 85);
  --color-accent: oklch(46% 0.19 262); --color-accent-ink: oklch(98% 0.004 85); --color-accent-soft: oklch(90% 0.035 262); --color-focus: oklch(50% 0.2 262);
  --color-live: oklch(52% 0.20 30); --color-live-soft: oklch(92% 0.04 30);
  --color-person: oklch(48% 0.13 60); --color-person-soft: oklch(92% 0.045 75);
  --color-sponsor: oklch(44% 0.13 150); --color-sponsor-soft: oklch(92% 0.045 150);
  --color-scene: oklch(46% 0.11 240); --color-scene-soft: oklch(92% 0.03 240);
  --color-ad: oklch(48% 0.13 60); --color-ad-soft: oklch(92% 0.045 75);
  --color-ok: oklch(44% 0.12 150); --color-bad: oklch(50% 0.18 25); --color-bad-soft: oklch(92% 0.04 25);
  --color-next: oklch(44% 0.12 150); --color-row-live: var(--color-paper-2); --color-row-next: transparent;
  --color-selection: color-mix(in oklab, var(--color-accent) 20%, transparent);
  --color-scrim: oklch(30% 0.01 85 / 0.45);
}

/* Phone: larger text and controls (g2-mobile) */
@media (max-width: 767px) {
  :root { --text-xs: 0.875rem; --text-sm: 0.9375rem; --text-base: 16px; --text-reading: 4.5rem; --text-strip: 1.6rem; --control-h: 44px; --control-h-lg: 48px; --radius-card: 12px; --radius-pill: 10px; --radius-chip: 6px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --control-h: 44px; --control-h-lg: 52px; }
}

/* Browser surfaces follow the system */
html { scrollbar-color: var(--color-muted) var(--color-paper); }
::selection { background: var(--color-selection); }

/* Type system utilities */
.fig { font-family: var(--font-figure); font-weight: var(--figure-weight); font-stretch: var(--figure-stretch); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.fig--time { font-stretch: var(--time-stretch); }
.num { font-variant-numeric: tabular-nums; }
.url { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ic--sm { width: 16px; height: 16px; }

/* ── Shared top bar (injected by shared/admin-nav.js on every admin page) ── */
.os2-topbar, .admin-top-nav.os2-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky-nav);
  display: flex; align-items: center; gap: var(--space-lg);
  min-height: 56px; padding: 0 var(--space-lg);
  background: var(--color-paper-3); color: var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5;
  backdrop-filter: none;
}
.os2-topbar * { box-sizing: border-box; }
.os2-topbar .os2-wordmark { font-weight: 600; text-decoration: none; white-space: nowrap; letter-spacing: var(--tracking-display); color: var(--color-ink); font-size: var(--text-md); }
.os2-topbar .os2-wordmark span { color: var(--color-muted); font-weight: 400; }
.os2-topbar .os2-nav { display: flex; gap: var(--space-2xs); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.os2-topbar .os2-nav a { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .os2-topbar .os2-nav a:hover { color: var(--color-ink); background: var(--color-paper-2); } }
.os2-topbar .os2-nav a[aria-current="page"] { color: var(--color-ink); background: var(--color-paper-2); box-shadow: inset 0 -2px 0 var(--color-accent); }
.os2-topbar .os2-identity { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; font-size: var(--text-sm); color: var(--color-muted); }
.os2-topbar .os2-slot { display: flex; align-items: center; gap: var(--space-xs); }
.os2-topbar .os2-slot:empty { display: none; }
.os2-topbar .os2-pair { display: inline-flex; flex-direction: column; line-height: 1.15; padding: 0 var(--space-xs); border-left: var(--rule-hair) solid var(--color-rule); }
.os2-topbar .os2-pair span:first-child { font-size: var(--text-xs); }
.os2-topbar .os2-pair span:last-child { color: var(--color-ink); font-weight: 500; }
.os2-topbar .os2-pair.switchable { cursor: pointer; }
.os2-topbar .os2-pair select { font: inherit; color: inherit; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); min-height: 28px; }
.os2-topbar .os2-chip { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 22px; padding: 0 var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-chip); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); white-space: nowrap; line-height: 1; }
.os2-topbar .os2-chip .ic { width: 14px; height: 14px; }
.os2-topbar .os2-conn[data-state="connected"] { border-color: var(--color-ok); color: var(--color-ok); }
.os2-topbar .os2-conn[data-state="connecting"], .os2-topbar .os2-conn[data-state="reconnecting"] { background: var(--color-person-soft); border-color: transparent; color: var(--color-person); }
.os2-topbar .os2-conn[data-state="disconnected"] { background: var(--color-bad-soft); border-color: transparent; color: var(--color-bad); }
.os2-topbar .os2-conn[data-state="reconnecting"] .ic { animation: os2-pulse 1.2s ease-in-out infinite; }
@keyframes os2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.os2-topbar .os2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 32px; padding: 0 var(--space-xs); border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: inherit; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; cursor: pointer; position: relative; }
.os2-topbar .os2-btn::before { content: ""; position: absolute; inset: -6px 0; }
@media (hover: hover) { .os2-topbar .os2-btn:hover { background: var(--color-paper-2); color: var(--color-ink); } }
.os2-topbar .os2-btn:active { transform: translateY(1px); }
.os2-topbar .os2-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.os2-topbar :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 1100px) { .os2-topbar .os2-pair.os2-pair--ws { display: none; } }
@media (max-width: 767px) {
  .os2-topbar, .admin-top-nav.os2-topbar { min-height: 52px; padding-inline: var(--space-md); gap: var(--space-sm); }
  .os2-topbar .os2-pair, .os2-topbar .os2-signout { display: none; }
  .os2-topbar .os2-nav a { min-height: 44px; }
  .os2-topbar .os2-conn .os2-conn-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .os2-topbar * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }