/* GENERATED by tools/build-theme.mjs from brand/registry.json — do not edit.
   Change the registry and run `npm run theme`. */
/*
 * One palette, light, shared by every operator surface. There is deliberately no
 * `prefers-color-scheme` block and no `[data-theme]` switch — two palettes is a
 * standing tax on every piece of UI, and the one being paid for was one nobody
 * chose. Do not add one back.
 *
 * The stage block below is not a dark mode. It is a different surface with a
 * fixed ground: the theatre the buyer watches is dark the way a cinema is, and
 * it is opted into with `data-ground="stage"`, never by a media query.
 *
 * Both faces are self-hosted. Nothing here asks Google for a file at runtime.
 */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('/_brand/fonts/jost-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_brand/fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/_brand/fonts/plex-mono-500.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* ground */
  --bg: #F6F6FB;
  --surface: #FFFFFF;
  --surface-2: #FBFBFE;
  --surface-3: #EEEEF7;
  --canvas: #F1F1F9;

  /* line */
  --line: #E8E8F2;
  --line-2: #D5D5E4;
  --track: #D6D6E8;

  /* text */
  --text: #15151E;
  --text-2: #4A4A5C;
  --text-3: #66667B;

  /* accent */
  --accent: #6B4FBE;
  --accent-2: #543BA0;
  --accent-soft: #EEEAFA;
  --accent-line: #CDC1EF;
  --on-accent: #FFFFFF;

  /* status */
  --good: #2E7B4D;
  --good-soft: #E5F3EA;
  --warn: #94630D;
  --warn-soft: #FBF1DD;
  --crit: #A93A31;
  --crit-soft: #FBE9E7;
  --live: #B23A78;
  --live-soft: #F9E9F2;
  --brass: #8A6A1F;

  /* the brand ramp — decoration only, never type on a light ground */
  --ramp-1: #AEC0E8;   /* periwinkle */
  --ramp-2: #BCAEE2;   /* lilac */
  --ramp-3: #D298D2;   /* orchid */
  --ramp-4: #ED87AE;   /* rose */
  --ramp-5: #F15C79;   /* coral */
  --ramp: linear-gradient(90deg, #AEC0E8 0%, #BCAEE2 25%, #D298D2 50%, #ED87AE 75%, #F15C79 100%);
  --ramp-diag: linear-gradient(135deg, #AEC0E8, #BCAEE2, #D298D2, #ED87AE, #F15C79);
  /* the same journey, deepened until every stop clears 4.5:1 — this cut may be
     letterforms, and the wordmark's outlines are filled from it */
  --ramp-deep: linear-gradient(90deg, #4E63C0 0%, #6B4FBE 25%, #9A4BA8 50%, #BE4380 75%, #C6425E 100%);

  /* type */
  --f-ui: 'Jost', Futura, 'Avenir Next', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* No serif in the system. Kept as an alias so markup asking for it by name
     still resolves; new work should not. */
  --f-serif: var(--f-ui);
  --w-display: 200;
  --w-heading: 300;
  --w-body: 400;
  --w-strong: 500;
  --track-brand: .19em;
  --track-label: .22em;
  --track-tight: -.005em;

  /* per-product accents for the Library's cards, cycled by index */
  --product-1: #6B4FBE;
  --product-wash-1: rgba(107,79,190,.13);
  --product-2: #3F5DB8;
  --product-wash-2: rgba(174,192,232,.30);
  --product-3: #9A4BA8;
  --product-wash-3: rgba(210,152,210,.20);
  --product-4: #B23A78;
  --product-wash-4: rgba(237,135,174,.20);
  --product-5: #C34257;
  --product-wash-5: rgba(241,92,121,.16);
  --product-count: 5;

  /* geometry */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 11px;
  --r-xl: 16px;
  --r-pill: 999px;
  --sh: 0 1px 2px rgba(21, 21, 30, .05), 0 10px 26px -18px rgba(21, 21, 30, .3);

  /* Aliases the Flow Library uses for the same roles. Defined here so neither
     surface declares a colour of its own. */
  --ink: var(--text);
  --muted: var(--text-2);
  --faint: var(--text-3);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --raise: var(--surface-2);
  --teal: var(--accent);
  --sans: var(--f-ui);
  --mono: var(--f-mono);
}

/* The theatre. Same token names, different ground — so a component styled once
   works on both without knowing which it is on.

   It paints itself. Redefining the tokens is not enough: color is inherited,
   so a subtree that only swapped its variables keeps whatever colour the light
   body handed down and renders dark text on a dark ground. Anything scoped with
   this attribute must be legible on its own. */
[data-ground="stage"] {
  color-scheme: dark;

  /* ground */
  --bg: #0B0B12;
  --surface: #111119;
  --surface-2: #16161F;
  --surface-3: #1A1A24;
  --canvas: #0B0B12;
  --letterbox: #000000;

  /* line */
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.13);
  --track: #2A2A38;

  /* text */
  --text: #F0F0F6;
  --text-2: #9494A6;
  --text-3: #61616F;

  /* accent */
  --accent: #BCAEE2;
  --accent-2: #AEC0E8;
  --accent-soft: rgba(188,174,226,.14);
  --accent-line: rgba(188,174,226,.32);
  --on-accent: #0B0B12;

  /* status */
  --good: #5BC98C;
  --good-soft: rgba(91,201,140,.14);
  --warn: #E0B05C;
  --warn-soft: rgba(224,176,92,.14);
  --crit: #F0857C;
  --crit-soft: rgba(240,133,124,.14);
  --live: #ED87AE;
  --live-soft: rgba(237,135,174,.14);
  --brass: #D6B265;

  /* orb */
  --orb-1a: #C6D2EE;
  --orb-1b: #7E97DA;
  --orb-2a: #E0B4DE;
  --orb-2b: #B667B4;
  --orb-3a: #F5A9C4;
  --orb-3b: #DE5C88;

  background: var(--bg);
  color: var(--text);
}

/* Focus has to be visible on a light ground too, and on every control. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

* { scrollbar-color: var(--line-2) transparent; }