/* Core role: Global CSS reset and theme variables (colors, fonts, spacing). */

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

    :root {
      /* ── PALETTE (raw values — source of truth, never used directly in new components) ── */
      --bg:           #0d1117;
      --bg-panel:     #161b22;
      --bg-card:      #1c2128;
      --border:       #21262d;
      --teal:         #2dd4bf;
      --teal-dim:     rgba(45,212,191,0.12);
      --amber:        #d29922;
      --amber-dim:    rgba(210,153,34,0.12);
      --red:          #f85149;
      --red-dim:      rgba(248,81,73,0.10);
      --green:        #3fb950;
      --green-dim:    rgba(63,185,80,0.10);
      --purple:       #a371f7;
      --yellow:       #e3b341;
      --lime:         #39ff14;
      --purple-dim:   rgba(163,113,247,0.12);
      --yellow-dim:   rgba(227,179,65,0.12);
      --lime-dim:     rgba(57,255,20,0.10);
      /* ── BORDER/LINE tints — standardised semantic outlines @ 0.3 alpha,
         replacing the hand-typed rgba(...,0.3/0.35/0.4) borders ── */
      --teal-line:    rgba(45,212,191,0.3);
      --amber-line:   rgba(210,153,34,0.3);
      --red-line:     rgba(248,81,73,0.3);
      --green-line:   rgba(63,185,80,0.3);
      --purple-line:  rgba(163,113,247,0.3);
      --lime-line:    rgba(57,255,20,0.3);
      --yellow-line:  rgba(227,179,65,0.3);
      --text:         #c9d1d9;
      --text-dim:     #8b949e;
      --text-faint:   #3fb950;
      --font-ui:      'Barlow', sans-serif;
      --font-mono:    'Share Tech Mono', monospace;
      --font-cond:    'Barlow Condensed', sans-serif;

      /* ── SURFACES (elevation tiers: 0 = deepest background, 2 = raised card) ── */
      --surface-0:    var(--bg);
      --surface-1:    var(--bg-panel);
      --surface-2:    var(--bg-card);
      --outline:      var(--border);

      /* ── TEXT HIERARCHY ── */
      --text-primary:   var(--text);
      --text-secondary: var(--text-dim);
      /* --text-faint is green (#3fb950), not a grey — use --text-brand for new code */
      --text-brand:     var(--text-faint);
      /* Canonical structural-label colour (brand green, the original look).
         Flip to var(--text-secondary) for neutral grey labels. */
      --text-label:     var(--text-faint);

      /* ── BRAND / PRIMARY ACCENT ── */
      --color-primary:     var(--teal);
      --color-primary-dim: var(--teal-dim);

      /* ── SEMANTIC FEEDBACK ── */
      --color-positive:     var(--green);
      --color-positive-dim: var(--green-dim);
      --color-warning:      var(--amber);
      --color-warning-dim:  var(--amber-dim);
      --color-negative:     var(--red);
      --color-negative-dim: var(--red-dim);
      --color-alert:        var(--lime);
      --color-special:      var(--purple);
      --color-highlight:    var(--yellow);
      --color-primary-line:   var(--teal-line);
      --color-positive-line:  var(--green-line);
      --color-warning-line:   var(--amber-line);
      --color-negative-line:  var(--red-line);
      --color-special-dim:    var(--purple-dim);
      --color-special-line:   var(--purple-line);
      --color-alert-dim:      var(--lime-dim);
      --color-alert-line:     var(--lime-line);
      --color-highlight-dim:  var(--yellow-dim);
      --color-highlight-line: var(--yellow-line);

      /* ── TYPE SCALE (intent-based names for new components) ── */
      --font-body:  var(--font-ui);
      --font-label: var(--font-cond);
      --font-data:  var(--font-mono);

      /* ── STATE LAYERS (use as background on hover/focus/active) ── */
      --state-hover:  rgba(255,255,255,0.04);
      --state-focus:  rgba(45,212,191,0.15);
      --state-active: rgba(45,212,191,0.22);

      /* ── SHAPE ── */
      --radius-sm: 0.2rem;   /* badges, bars, chips */
      --radius-md: 0.3rem;   /* cards, panels, inputs, menus */
      --radius-lg: 0.4rem;   /* builder boxes, dropdowns */

      /* ── MOTION ── */
      --ease-standard: cubic-bezier(0.2, 0, 0, 1.0);
      --duration-short:  150ms;
      --duration-medium: 250ms;
    }

    html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-ui); overflow: hidden; }
    /* html's font-size is the rem anchor for the whole document — it must stay
       a fixed px value, NOT rem (rem on the root element resolves against the
       browser's UA default, not itself, so "1.4rem" here would silently
       compute to ~22px instead of 14px). js/init.js's updateScale() multiplies
       this 10px by the responsive scale factor instead of using CSS zoom, so
       every rem-based size in the rest of the UI scales with it. */
    html { font-size: 10px; }
    body { font-size: 1.4rem; }

    /* #app-root is shell-loader.js's injection target (see body.html) — it sits
       between body and #shell in the DOM, so the height:100% chain below needs
       it explicitly sized too, or #shell's height:100% resolves against an
       auto-height parent and collapses to content height instead of the
       viewport. */
    #app-root { height: 100%; }

    /* height:100% (not 100vh): chains through html/body's own height:100%
       rather than re-measuring the viewport, so the shell always exactly
       fits and scrollIntoView (crew/station/ship jump links) can't push the
       top bars off-screen via the overflow:hidden body. */
    /* max-width caps the whole app on very wide monitors and margin-inline:auto
       centres it, so ultrawide/4K screens get tidy gutters (filled by body's
       --bg) instead of the UI stretching edge-to-edge. The cap is generous
       (~2000px at the 10px root) so dense areas — wide tables, the galaxy map —
       still get plenty of room to fill within it; this is the "hybrid" cap. */
    #shell { display: flex; flex-direction: column; height: 100%; max-width: 200rem; margin-inline: auto; }