:root {
  /* ===== PALETTE ===== */
  --blue-200: #9cc8ff;
  --blue-300: #7aa7f9;
  --blue-400: #3898ff;
  --slate-050: #ffffff;
  --slate-200: #e8edf5;
  --slate-300: #d4e0f5;
  --slate-400: #a9bcd9;
  --slate-500: #8ba0c4;
  --slate-600: #6e85ac;
  --green-400: #4cc78b;
  --amber-400: #e8a33d;
  --red-400: #e5484d;
  --rgb-accent: 56, 152, 255;
  --rgb-accent-muted: 122, 167, 249;   /* --blue-300 */
  --rgb-brand-red: 229, 72, 77;   /* --red-400 */
  --rgb-ink-2: 232, 237, 245;     /* --slate-200 */
  --rgb-edge: 160, 190, 235;
  --rgb-chrome-line: 194, 206, 227;   /* warmer; chrome rules and seams */
  --rgb-ground-deep: 6, 12, 31;        /* --ground-deep */
  --rgb-shadow: 0, 0, 0;

  /* ===== SURFACE ===== */
  --surface-0: #0a1733;
  --surface-1: #131f38;
  --surface-2: #0d1728;
  --surface-3: #22406e;
  --surface-glass: rgba(16, 24, 40, 0.7);
  --surface-stripe: rgba(var(--rgb-edge), 0.045);
  --lift: 0 10px 30px rgba(var(--rgb-shadow), 0.4);

  /* Two variants on purpose: app, and darker for marketing. */
  --ground-deep: #060c1f;   /* flat equivalent of --ground-deep-gradient */
  --ground-gradient: radial-gradient(1600px 1100px at 50% 34%, #121f47 0%, #09142d 46%, #050a1b 100%);
  --ground-deep-gradient: radial-gradient(1600px 1100px at 50% 34%, #14224d 0%, #0a1733 46%, var(--ground-deep) 100%);

  /* ===== INK ===== */
  --ink-1: var(--slate-050);
  --ink-2: var(--slate-200);
  --ink-3: var(--slate-400);
  --ink-4: var(--slate-500);
  --topbar-nav: #99abcb;
  --topbar-bg: #17243f;
  --topbar-line: rgba(var(--rgb-chrome-line), 0.18);

  /* ===== LINE ===== */
  --line-1: rgba(var(--rgb-edge), 0.10);
  --line-2: rgba(var(--rgb-edge), 0.16);
  --line-3: rgba(var(--rgb-edge), 0.32);
  --line-4: rgba(var(--rgb-edge), 0.45);

  /* ===== ACCENT ===== */
  --accent: var(--blue-400);
  --accent-bright: var(--blue-200);
  --accent-muted: var(--blue-300);
  --accent-wash: rgba(var(--rgb-accent), 0.12);
  --accent-wash-strong: rgba(var(--rgb-accent), 0.22);
  --accent-edge: rgba(var(--rgb-accent), 0.45);
  --brand-red: var(--red-400);

  /* ===== STATUS ===== */
  --status-ok: var(--green-400);
  --status-warn: var(--amber-400);
  --status-bad: var(--red-400);

  /* ===== TYPE ===== */
  --font-sans: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --text-md: 14px;
  --leading-normal: 1.5;

  /* ===== SPACE AND RADIUS ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --border-w: 1px;

  /* ===== MOTION AND LAYOUT ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-slow: 0.7s;
  --topbar-h: 60px;
  --banner-h: calc(var(--text-md) * var(--leading-normal));
  --chrome-v: calc(var(--banner-h) * 2);
  --measure-wide: 2200px;
  --gutter-wide: clamp(24px, 3vw, 72px);
  --thumb: rgba(138, 170, 226, 0.24);
  --thumb-hover: rgba(152, 185, 240, 0.38);
}


/* ===== FONTS ===== */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin-400.cd56e2ec63d7.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibmplexmono-latin-400.79936b18df9f.woff2") format('woff2');
}

@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  ascent-override: 92.5%;
  descent-override: 23.6%;
  line-gap-override: 0%;
  size-adjust: 100.6%;
}
@font-face {
  font-family: 'Plex Mono Fallback';
  src: local('Consolas'), local('Menlo'), local('DejaVu Sans Mono');
  ascent-override: 78%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 104%;
}


/* ===== BASELINE ELEMENTS ===== */
body {
  background: var(--surface-0);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}


:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent-wash-strong);
  color: var(--ink-1);
}

html {
  color-scheme: dark;
  background: var(--surface-0);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--thumb) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--thumb);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--thumb-hover); background-clip: content-box; }

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