/* lab-e3p design tokens — "Trinity" character. Owner: Niobe.
   Dark-first. Components use ONLY these variables, never raw hex/px. */

:root {
  /* Surfaces: deep black -> card layers */
  --bg-0: #060907;        /* page background */
  --bg-1: #0a100c;        /* section / sidebar */
  --bg-2: #101712;        /* card */
  --bg-3: #161f19;        /* raised card, hover */
  --bg-overlay: rgba(4, 7, 5, 0.78);

  /* Lines */
  --border-0: #1a231d;    /* hairline card border */
  --border-1: #24312a;    /* stronger divider */
  --border-accent: #1f5c3f;

  /* Text: cold white scale */
  --text-0: #e9f4ee;      /* primary */
  --text-1: #a9bfb2;      /* secondary */
  --text-2: #6e8378;      /* muted, meta */
  --text-inverse: #06110a;

  /* Accent: neon green, used sparingly (actions, status, focus) */
  --accent: #00e68c;
  --accent-strong: #00ff9c;
  --accent-dim: #0e9c66;
  --accent-bg: rgba(0, 230, 140, 0.10);
  --accent-glow: 0 0 0 1px rgba(0, 230, 140, 0.35), 0 0 18px rgba(0, 230, 140, 0.12);

  /* Status */
  --ok: #00e68c;
  --warn: #ffc14d;
  --danger: #ff5d5d;
  --info: #5db8ff;
  --idle: #6e8378;
  --ok-bg: rgba(0, 230, 140, 0.10);
  --warn-bg: rgba(255, 193, 77, 0.10);
  --danger-bg: rgba(255, 93, 93, 0.10);
  --info-bg: rgba(93, 184, 255, 0.10);

  /* Typography */
  --font-ui: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.72rem;
  --fs-sm: 0.84rem;
  --fs-md: 0.95rem;
  --fs-lg: 1.12rem;
  --fs-xl: 1.45rem;
  --fs-2xl: 1.9rem;
  --lh-tight: 1.25;
  --lh-body: 1.55;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Shadows (dark-tuned: depth, not brightness) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.45);

  /* Layout */
  --nav-h: 56px;
  --bottomnav-h: 60px;
  --sidebar-w: 232px;
  --content-max: 1240px;

  /* Motion */
  --t-fast: 120ms ease;
  --t-med: 200ms ease;
}

/* Base — both apps include tokens.css first, then their own styles. */
html { background: var(--bg-0); color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--accent-glow); border-radius: var(--r-sm); }