/* Design tokens, reset and base typography — shared by the sign-in page and the dashboard. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --hue: 165; /* accent hue (brand: emerald), changed by the accent picker */
  color-scheme: light dark;

  /* surfaces */
  --bg: light-dark(#f5f5f7, #08080a);
  --surface: light-dark(#ffffff, #111114);
  --surface-2: light-dark(#f8f8fa, #16161a);
  --surface-3: light-dark(#eeeef1, #1d1d22);
  --surface-hover: light-dark(#f3f3f6, #1a1a1f);
  --border: light-dark(#e5e5ea, #232329);
  --border-strong: light-dark(#d1d1d9, #34343d);
  --overlay: light-dark(rgb(16 16 24 / 0.42), rgb(0 0 0 / 0.66));

  /* text */
  --text: light-dark(#141418, #f4f4f6);
  --text-2: light-dark(#4b4b56, #a3a3ae);
  --text-3: light-dark(#636370, #84848a); /* WCAG AA (>=4.5:1, extra margin for AA edge cases like .stat-foot span) against every surface this token sits on in either mode */

  /* accent (hue-driven) */
  --accent: #10b981;
  --accent: light-dark(oklch(0.58 0.15 var(--hue)), oklch(0.76 0.17 var(--hue)));
  --accent-strong: light-dark(oklch(0.46 0.13 var(--hue)), oklch(0.82 0.15 var(--hue)));
  --accent-2: light-dark(oklch(0.6 0.12 200), oklch(0.8 0.12 200)); /* cyan companion from the logo */
  --accent-soft: color-mix(in oklab, var(--accent) 13%, transparent);
  --accent-softer: color-mix(in oklab, var(--accent) 7%, transparent);
  --accent-ring: color-mix(in oklab, var(--accent) 50%, transparent);
  --on-accent: #04170f; /* dark ink reads at >=4.5:1 on the accent in both themes; white only cleared dark mode's brighter accent */

  /* status colours - light-mode shades darkened so status text at 4.5:1+ against its own *-soft badge background */
  --success: light-dark(#00763b, #4ade80);
  --warning: light-dark(#9c5306, #fbbf24); /* a hair darker still - a badge over an already-warm-tinted card (e.g. "expires soon") needed a bit more margin than a flat surface did */
  --danger: light-dark(#c71f33, #ff6b7d);
  --info: light-dark(#1365c7, #60a5fa);
  --success-soft: color-mix(in oklab, var(--success) 14%, transparent);
  --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
  --danger-soft: color-mix(in oklab, var(--danger) 13%, transparent);
  --info-soft: color-mix(in oklab, var(--info) 13%, transparent);
  --neutral-soft: light-dark(rgb(20 20 40 / 0.06), rgb(255 255 255 / 0.07));

  /* code syntax-highlight tokens (see /assets/lib/highlight.js) - one palette shared by every code sample on the
     site, light-mode shades re-checked at >=4.6:1 against a typical code-block background (#f3f4f7) since the
     dark-mode picks (tuned for a near-black background) read far too faint on a light one */
  --tok-keyword: light-dark(#83609a, #c792ea);
  --tok-string: light-dark(#56743d, #a5e075);
  --tok-comment: light-dark(#666d7a, #747c8b);
  --tok-function: light-dark(#487294, #7cc4ff);
  --tok-number: light-dark(#906543, #f0a970);
  --tok-property: light-dark(#107066, #5eead4);

  /* shape & depth */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 9px;
  --r-lg: 12px;
  --r-xl: 18px;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 24px 60px -16px rgb(0 0 0 / 0.45), 0 8px 20px -8px rgb(0 0 0 / 0.25);
  --ring: 0 0 0 3px var(--accent-ring);

  /* type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font: 400 14px/1.5 var(--font);
  font-optical-sizing: auto;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
h1 {
  font-size: 24px;
  letter-spacing: -0.025em;
}
h2 {
  font-size: 15px;
}
h3 {
  font-size: 14px;
}

a {
  color: var(--accent-strong);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

::selection {
  background: var(--accent-soft);
}

code,
kbd,
samp,
.mono {
  font-family: var(--mono);
  font-size: 0.92em;
}

.tnum {
  font-variant-numeric: tabular-nums;
}
/* code syntax-highlight spans, written by /assets/lib/highlight.js */
.tok-k {
  color: var(--tok-keyword);
}
.tok-s {
  color: var(--tok-string);
}
.tok-c {
  color: var(--tok-comment);
  font-style: italic;
}
.tok-f {
  color: var(--tok-function);
}
.tok-n {
  color: var(--tok-number);
}
.tok-p {
  color: var(--tok-property);
}
.muted {
  color: var(--text-2);
}
.faint {
  color: var(--text-3);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
[hidden] {
  display: none !important;
}

/* scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

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

/* icons (SVG sprite: <svg class="icon"><use href=".../icons.svg#i-name"/></svg>) */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}
.icon.sm {
  width: 14px;
  height: 14px;
}
.icon.lg {
  width: 20px;
  height: 20px;
}
.icon.xl {
  width: 24px;
  height: 24px;
}
.icon.spin {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- top-of-window progress bar (/assets/lib/progress.js, and dock.js on public pages) ---------- */
.fx-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2.5px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fx-progress.on {
  opacity: 1;
}
.fx-progress.done {
  opacity: 0;
  transition-delay: 0.15s;
}
.fx-progress > i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 70%, transparent);
  transition: transform 0.2s ease;
}