/* Shared visual tokens for the ecosystem — "blueprint / instrument panel" direction.
   Apps MAY (need not) adopt them: <link rel="stylesheet" href="/shared/theme.css">. */

:root {
  /* surfaces — deep navy, not pure black (blueprint ground) */
  --bg:        #0a1020;
  --panel:     #101a30;
  --panel-2:   #0d1526;
  --line:      #1e2d4d;
  --line-soft: #16223b;

  /* text */
  --ink:       #dbe4f2;
  --ink-dim:   #7c8aa8;
  --ink-faint: #4a5978;

  /* accents — amber is the only loud one (instrument backlight / LED),
     cyan only for "ok" status, danger for errors */
  --amber:     #ffb454;
  --amber-dim: #b87f38;
  --cyan:      #4fd6c9;
  --danger:    #ff6b6b;

  /* blueprint grid in the background */
  --grid-line: rgba(120, 160, 220, 0.045);
  --grid-size: 28px;

  /* typography */
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* rhythm */
  --space:  1rem;
  --radius: 4px;         /* sharp corners, instrument look */
  --maxw:   1040px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--bg);
  /* blueprint grid */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  line-height: 1.5;
}

/* monospace "schematic" caption — eyebrow/label utility */
.label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

a { color: var(--amber); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

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