/* Torusframe design tokens.
 *
 * One file, three sites, three looks. The sites share a spacing scale, a body
 * face, and a monospace; each one has its own ground, its own display face,
 * and its own layout. All three palettes live here rather than in the sites,
 * because the company site shows each product in that product's own colours.
 *
 * A site picks its palette by setting one class on <html>. That class maps the
 * raw palette onto the semantic roles (--bg, --text, --accent...) that
 * base.css is written against, so shared components follow whichever world
 * they are placed in.
 *
 * PLACEHOLDER: the direction is real, the values can still move.
 */

/* Type ---------------------------------------------------------------------
   Self-hosted, Latin subset only, all SIL OFL (licences in fonts/licenses/).
   Nothing is requested from a third party. Each face is a single variable
   file, so every weight and width on a page costs one download. */

@font-face {
  font-family: "Instrument Sans";
  src: url("/shared/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Martian Mono";
  src: url("/shared/fonts/martian-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("/shared/fonts/unbounded.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/shared/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-unbounded: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-archivo: "Archivo", "Arial Narrow", system-ui, sans-serif;

  /* Palettes --------------------------------------------------------------
     Named by what they are, not by role. Roles are assigned per site below. */

  /* Torusframe: a saturated violet field on lilac-grey paper. The field is the
     one loud surface in the whole family. The mint only appears on the dark
     surfaces, the field and the ink band, never on paper. */
  --tf-field: #3a20dc;
  --tf-field-deep: #1f1090;
  --tf-on-field: #f4f2ff;
  --tf-on-field-muted: #c3bcff;
  --tf-signal: #5cf0d8;
  --tf-paper: #eceaf5;
  --tf-paper-raised: #f8f7fd;
  --tf-ink: #15122e;
  --tf-ink-muted: #56527a;
  --tf-rule: #d0cce4;

  /* Trace: the graphite of the application itself. Aqua marks the selection,
     amber marks the characters a search matched, exactly as in the app. */
  --trace-ground: #101216;
  --trace-panel: #171a20;
  --trace-panel-2: #1e2229;
  --trace-line: #272c35;
  --trace-line-strong: #3a414d;
  --trace-text: #eceff3;
  --trace-text-muted: #9ba4b3;
  --trace-text-subtle: #677083;
  --trace-aqua: #5ee0e6;
  --trace-aqua-ink: #03191b;
  --trace-amber: #ffbf5a;

  /* Orbit: a technical sheet. Cool paper, ink, one cobalt, and three state
     colours that mean exactly what the maturity table says they mean. */
  --orbit-paper: #edf0f4;
  --orbit-sheet: #f8f9fb;
  --orbit-ink: #0c1626;
  --orbit-ink-muted: #4a5870;
  --orbit-ink-subtle: #77849a;
  --orbit-rule: #cbd2dd;
  --orbit-rule-strong: #9aa5b7;
  --orbit-cobalt: #1747e6;
  --orbit-implemented: #107a45;
  --orbit-experimental: #a45f00;
  --orbit-reopened: #c02b2b;

  /* Scale ----------------------------------------------------------------- */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-4xl: 3.75rem;

  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition: 160ms ease;
}

/* Site roles ------------------------------------------------------------------
   Every shared component reads these and nothing else. */

.site-torusframe {
  color-scheme: light;
  --bg: var(--tf-paper);
  --bg-raised: var(--tf-paper-raised);
  --bg-sunken: #e2dfef;
  --text: var(--tf-ink);
  --text-muted: var(--tf-ink-muted);
  --text-subtle: #8581a3;
  --border: var(--tf-rule);
  --border-strong: #b3adcf;
  --accent: var(--tf-field);
  --accent-text: var(--tf-on-field);
  --accent-quiet: rgb(58 32 220 / 0.1);
  --warning: #b26b00;
  --font-display: var(--font-unbounded);
}

.site-trace {
  color-scheme: dark;
  --bg: var(--trace-ground);
  --bg-raised: var(--trace-panel);
  --bg-sunken: #0b0d10;
  --text: var(--trace-text);
  --text-muted: var(--trace-text-muted);
  --text-subtle: var(--trace-text-subtle);
  --border: var(--trace-line);
  --border-strong: var(--trace-line-strong);
  --accent: var(--trace-aqua);
  --accent-text: var(--trace-aqua-ink);
  --accent-quiet: rgb(94 224 230 / 0.12);
  --warning: var(--trace-amber);
  --font-display: var(--font-mono);
}

.site-orbit {
  color-scheme: light;
  --bg: var(--orbit-paper);
  --bg-raised: var(--orbit-sheet);
  --bg-sunken: #e3e7ed;
  --text: var(--orbit-ink);
  --text-muted: var(--orbit-ink-muted);
  --text-subtle: var(--orbit-ink-subtle);
  --border: var(--orbit-rule);
  --border-strong: var(--orbit-rule-strong);
  --accent: var(--orbit-cobalt);
  --accent-text: #ffffff;
  --accent-quiet: rgb(23 71 230 / 0.08);
  --warning: var(--orbit-experimental);
  --font-display: var(--font-archivo);
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
}