/* @orbit/relay — foundation tokens (the :root layer that pierces every atom's
   Shadow DOM). Lifted from the seed `assets/colors_and_type.css` (itself @orbit/ui
   src/tokens). Served at /relay/foundations.css; later generated per-tenant from
   the orbit_relay foundations row. THIS is the only place a palette is declared. */
@font-face { font-family: "Lexend"; src: url("/assets/fonts/Lexend-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Humant"; src: url("/assets/fonts/Humant-Thin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
:root {
  --red: rgb(214, 38, 3);
  --green: #4caf50;
  --blue: #0366d6;
  --favorit: rgb(255, 149, 62);
  --accent: var(--favorit);

  /* THE ONLY LITERAL COLORS — the two ink poles, as bare channel triplets (R G B)
     so the ladders below can be pure ALPHA of them. There are no other color values
     in this palette. relay = the orbit tenant; a brand re-inks by overriding
     --white / --black (or --fg / --bg) from its brandkit DB foundations row. */
  --white: 255 255 255;
  --black: 0 0 0;

  /* --fg / --bg are the CHANNEL form of --100 / --inv-100 (the ink + its inverse).
     THE THEME SWAP FLIPS ONLY THESE TWO (see html.inverted) — every ladder step is an
     alpha of them, so the whole surface inverts from two declarations. Plain rgb()
     (not color-mix / relative-color, which serialise as color(srgb …)) keeps every
     resolved value in rgba() form, byte-identical to the design it is compared against. */
  --fg: var(--white);
  --bg: var(--black);

  /* Foreground ink ladder — alpha of --fg (--100 is the full-opacity anchor) */
  --100: rgb(var(--fg)); --80: rgb(var(--fg) / 0.8); --60: rgb(var(--fg) / 0.6); --40: rgb(var(--fg) / 0.4);
  --20: rgb(var(--fg) / 0.2); --10: rgb(var(--fg) / 0.1); --5: rgb(var(--fg) / 0.05); --4: rgb(var(--fg) / 0.04); --2: rgb(var(--fg) / 0.02);

  /* Inverse ink ladder — alpha of --bg (--inv-100 is the full-opacity anchor) */
  --inv-100: rgb(var(--bg)); --inv-80: rgb(var(--bg) / 0.8); --inv-60: rgb(var(--bg) / 0.6); --inv-40: rgb(var(--bg) / 0.4);
  --inv-20: rgb(var(--bg) / 0.2); --inv-10: rgb(var(--bg) / 0.1); --inv-5: rgb(var(--bg) / 0.05); --inv-4: rgb(var(--bg) / 0.04); --inv-2: rgb(var(--bg) / 0.02);

  /* Typography */
  --f-sans: "Lexend", -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --f-humant: "Humant", "Lexend", sans-serif;
  --fw-thin: 180; --fw-reg: 300; --fw-med: 480; --fw-bold: 600;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px;
  --ls-body: 0.16px;

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 36px; --r-pill: 24px; --r-cap: 999px;

  /* Motion */
  --dur-fast: 120ms; --dur-base: 220ms; --dur-med: 240ms; --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Glow — focus / hover indicator */
  --glow: 0 0 5px var(--40), 0 0 5px var(--40), 0 0 5px var(--40);

  /* Button heights */
  --btn-h-lg: 48px; --btn-h-sm: 36px;

  /* Text-selection highlight — monochrome, NOT the browser default (backlog 24).
     The inverse ladder (black text on the white-100 highlight) keeps selection
     on-palette. `::selection` does not inherit across the shadow boundary, so
     the same rule is also adopted into every shadow root via base-layer.ts. */
  --selection-bg: var(--100);
  --selection-fg: var(--inv-100);

  /* Canvas/WebGL surfaces (the orbit-scene, the astra-orb, any rendered anomaly) can't
     read the token ladder — they paint raw pixels. `--surface-invert` lets them follow
     the theme with `filter: var(--surface-invert)`: `none` in dark, invert+grayscale in
     light (mirrors the scene atom's invert pass). Foundation-authored so it's uniform. */
  --surface-invert: none;
}

/* THEME INVERSION (operator 2026-07-01): `html.inverted` (or any .inverted ancestor)
   SWAPS the foreground (--N, white) ladder with the inverse (--inv-N, black) ladder,
   flipping the whole surface at once — every relay-* atom reads these tokens. This
   lives in the FOUNDATION (relay = the orbit tenant; the ladders are the brandkit's),
   not in a page's own CSS. The profile-menu Theme row toggles the class. */
html.inverted, .inverted {
  /* THE SWAP — flip the two ink anchors only. --fg becomes black, --bg becomes white;
     every --N / --inv-N step is an alpha of these, so the whole surface inverts from
     these two declarations alone. No re-listed colors, no per-step overrides. */
  --fg: var(--black);
  --bg: var(--white);
  --surface-invert: invert(1) grayscale(1);
}

/* Page-level selection highlight (pierces no shadow — the shadow copy lives in
   base-layer.ts, adopted into every relay element's shadow root). */
::selection { background: var(--selection-bg); color: var(--selection-fg); text-shadow: none; }
::-moz-selection { background: var(--selection-bg); color: var(--selection-fg); text-shadow: none; }

/* --- per-tenant override: orbit (Orbit) — generated from the orbit_relay foundations row --- */
:root {
  --darker: #1b1f23;
  --dark: #24292e;
  --light: #f6f8fa;
  --lighter: #ffffff;
  --blue: #0366d6;
  --red: rgb(214, 38, 3);
  --green: #4caf50;
  --purple: #8a5cf6;
  --purple-light: #c4b5fd;
  --accent-light: #2188ff;
  --favorit: rgb(255, 149, 62);
  --border: #2b3036;
  --text: #c9d1d9;
  --muted: #8b949e;
  --lint-darkgreen: #003b35;
  --lint-lightgreen: #0f9;
  --brand-svelte: #ff3e00;
  --brand-react: #61dafb;
  --brand-python: #0035a0;
  --brand-linux: #fcc624;
  --brand-bash: #4eaa25;
  --flow-node-blue: rgba(0, 140, 255, 0.2);
  --flow-node-red: rgba(255, 72, 0, 0.2);
  --flow-node-green: rgba(0, 255, 98, 0.2);
  --flow-node-white: rgba(255, 255, 255, 0.2);
  --100: rgba(255, 255, 255, 1);
  --80: rgba(255, 255, 255, 0.8);
  --60: rgba(255, 255, 255, 0.6);
  --40: rgba(255, 255, 255, 0.4);
  --20: rgba(255, 255, 255, 0.2);
  --10: rgba(255, 255, 255, 0.1);
  --5: rgba(255, 255, 255, 0.05);
  --4: rgba(255, 255, 255, 0.04);
  --2: rgba(255, 255, 255, 0.02);
  --inv-100: rgba(0, 0, 0, 1);
  --inv-80: rgba(0, 0, 0, 0.8);
  --inv-60: rgba(0, 0, 0, 0.6);
  --inv-40: rgba(0, 0, 0, 0.4);
  --inv-20: rgba(0, 0, 0, 0.2);
  --inv-10: rgba(0, 0, 0, 0.1);
  --inv-5: rgba(0, 0, 0, 0.05);
  --inv-4: rgba(0, 0, 0, 0.04);
  --inv-2: rgba(0, 0, 0, 0.02);
  --f-sans: "Lexend", -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --f-humant: "Humant", "Lexend", sans-serif;
  --fw-thin: 180;
  --fw-reg: 300;
  --fw-med: 480;
  --fw-bold: 600;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --ls-body: 0.16px;
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 56px;
  --sp-9: 64px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 36px;
  --r-pill: 24px;
  --r-cap: 999px;
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-med: 240ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lv-debug: var(--40);
  --lv-log: var(--60);
  --lv-info: var(--blue);
  --lv-warn: var(--favorit);
  --lv-error: var(--red);
  --glow: 0 0 5px var(--40), 0 0 5px var(--40), 0 0 5px var(--40);
  --ts-p: 0 1px 3px var(--inv-80),  0 0 8px  var(--inv-60);
  --ts-h1: 0 1px 4px var(--inv-100), 0 0 12px var(--inv-80);
  --ts-h2: 0 1px 3px var(--inv-80),  0 0 10px var(--inv-60);
  --ts-h3: 0 1px 3px var(--inv-80),  0 0 8px  var(--inv-60);
  --ts-a: 0 1px 3px var(--inv-80),  0 0 8px  var(--inv-60);
  --btn-h-lg: 48px;
  --btn-h-sm: 36px;
  --tenant-name: "Orbit";
  --tenant-prefix: "orb-";
}