/* james.qa shared theme
   Design language: jameslcowan defense-tech generation (docs/DESIGN-SYSTEM.md).
   Anchors: Palantir, Anduril, Epirus. Two voices: Space Grotesk (display, prose)
   and Space Mono (the MICRO label layer). Hairline 1px structure, 4px corners,
   no shadow depth, accent spent only on interaction.

   Color system: the CRT phosphor terminal set. Interaction accent is phosphor
   green (the P1 CRT family), bridged by ANSI bright cyan and grounded by a deep
   phosphor teal; VT220 amber (#FFB000 family) appears only as the sparse warm
   counterpoint in the orb field. Dark is the default ground; the light theme is
   the warm paper mirror, toggled via html[data-theme] (theme.js) with a
   prefers-color-scheme fallback when no preference is stored. */

/* Self-hosted fonts (strict CSP: font-src 'self') */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./fonts/space-grotesk-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/space-mono-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/space-mono-700-latin.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* Ground and structure (gen 2 token set) */
  --bg: #000000;
  --card: #0A0B0D;
  --panel: #101216;
  --border: #1F2228;
  --border-strong: #2A2E36;

  /* Warm gray ramp */
  --text: #F5F5F7;
  --dim: #9A968D;
  --faint: #6C6A63;

  /* Interaction accent: phosphor green, cyan as the secondary HUD hue */
  --accent: #2EE86A;
  --accent-deep: #16B24C;
  --accent-cyan: #3ADCF2;

  /* Translucent surfaces over the orb field */
  --shell-bg: rgb(10 11 13 / 0.62);
  --list-bg: rgb(16 18 22 / 0.4);
  --hover-bg: rgb(245 245 247 / 0.04);
  --hover-bg-strong: rgb(245 245 247 / 0.05);
  --selection: rgb(46 232 106 / 0.24);

  /* Orb field colour lives in orbs.js (the PALETTE constant), not in CSS: the
     field is now a canvas 2D physics field, not pre-softened CSS gradients. */

  --radius: 4px;

  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace;

  /* MICRO label layer */
  --micro-size: 0.6875rem;
  --micro-track: 0.08em;

  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-inout: cubic-bezier(0.645, 0.045, 0.355, 1);
  --t-fast: 150ms var(--ease-inout);
  --t-state: 250ms var(--ease-inout);
}

/* Light theme: warm paper mirror of the dark ground. The orbs soften to low
   alpha ink tints of the same phosphor set so the field stays elegant on
   paper. Explicit user choice via html[data-theme="light"] (set by theme.js). */
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #F4F2EC;
  --card: #FBFAF6;
  --panel: #FFFFFF;
  --border: #DFDBD0;
  --border-strong: #C8C3B5;

  --text: #17181C;
  --dim: #5A574E;
  --faint: #8B8779;

  --accent: #0C8A44;
  --accent-deep: #086A34;
  --accent-cyan: #0E7C8F;

  --shell-bg: rgb(252 251 249 / 0.7);
  --list-bg: rgb(255 255 255 / 0.5);
  --hover-bg: rgb(22 24 28 / 0.04);
  --hover-bg-strong: rgb(22 24 28 / 0.05);
  --selection: rgb(12 138 68 / 0.22);
}

/* System preference fallback: applies only while no explicit choice is stored
   (theme.js leaves data-theme unset in that case). Mirrors the block above. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --bg: #F4F2EC;
    --card: #FBFAF6;
    --panel: #FFFFFF;
    --border: #DFDBD0;
    --border-strong: #C8C3B5;

    --text: #17181C;
    --dim: #5A574E;
    --faint: #8B8779;

    --accent: #0C8A44;
    --accent-deep: #086A34;
    --accent-cyan: #0E7C8F;

    --shell-bg: rgb(252 251 249 / 0.7);
    --list-bg: rgb(255 255 255 / 0.5);
    --hover-bg: rgb(22 24 28 / 0.04);
    --hover-bg-strong: rgb(22 24 28 / 0.05);
    --selection: rgb(12 138 68 / 0.22);
  }
}

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

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

a {
  color: inherit;
}

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

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Theme toggle: terminal control in the panel topbar, an icon showing the
   mode a press switches TO (sun offered in dark, moon in light). Icons are
   MDI, fetched once from the Iconify API at authoring time and inlined in
   icons.js, so the page makes zero icon network requests. Wired by theme.js
   (data-theme-toggle); markup ships in both page variants. */
.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--dim);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.theme-toggle svg {
  width: 15px;
  height: 15px;
  display: block;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--hover-bg);
}

.theme-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle__icon {
  display: none;
  line-height: 0;
}

.theme-toggle__icon--sun {
  display: block;
}

:root[data-theme='light'] .theme-toggle__icon--sun {
  display: none;
}

:root[data-theme='light'] .theme-toggle__icon--moon {
  display: block;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle__icon--sun {
    display: none;
  }

  :root:not([data-theme]) .theme-toggle__icon--moon {
    display: block;
  }
}

/* Orb field: the sanctioned flourish for this surface. It is now a canvas 2D
   physics field (see orbs.js), not CSS gradients: orbs.js injects a fixed,
   full viewport <canvas id="orb-canvas"> at z-index 0 behind the panel and
   drives real motion, edge and orb to orb collisions, pulsing blooms, an
   additive blend on the dark ground and a multiply blend on the light ground,
   with a static composition under prefers-reduced-motion. Keeping the ground
   painting here (below) is unnecessary because orbs.js paints the ground onto
   the canvas from --bg every frame. */