/* The BrainTwo Visual Language, emitted for the landing page - do not edit.
   Regenerate after changing a token default: pnpm --filter @braintwo/web generate:artifacts

   One source (@braintwo/ui/tokens) emits every surface, so the app, the
   sign-in screen, the console, the ledger UI and the landing page cannot
   drift apart. The accent is the only thing a surface picks for itself. */
:root {
  /* System-owned: the Elevation Scale, Interaction States, origin colours,
     border geometry, icons, status colours, and Interface Text. */
  --font-sans: Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --elevation-0: #101010;
  --elevation-1: #191919;
  --elevation-2: #282828;
  --state-hover-fill: #323232;
  --state-hover-brighten: 1.5;
  --state-hover-glow: 0 0 8px currentColor;
  --accent-hover: color-mix(in srgb, var(--accent) 65%, #ffffff);
  --state-focus-ring-color: var(--accent);
  --state-focus-ring-width: var(--border-width-2);
  --state-focus-ring-offset: 2px;
  --state-active-brighten: 1.2;
  --state-selected-fill: color-mix(in srgb, var(--accent) 20%, transparent);
  --state-disabled-opacity: 0.4;
  --state-dragging-opacity: 0.95;
  --origin-system: #f59e0b;
  --origin-user: #22c55e;
  --border-color: #323232;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --rail-width: 3px;
  --radius-0: 0px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --shadow-lift: 0 8px 24px #00000066;
  --ring-inset: inset 0 0 0;
  --ring-outset: 0 0 0;
  --motion-1: 100ms;
  --motion-2: 150ms;
  --motion-3: 220ms;
  --motion-ease: ease;
  --motion-hold: 2000ms;
  --motion-dismiss: 500ms;
  --icon-stroke-width: 1.4;
  --icon-chrome-pad: 6px;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #dc3c3c;
  --history-added: #86efac;
  --history-edited: #93c5fd;
  --history-moved: #fdba74;
  --history-refused: #fca5a5;
  --text-jumbo-font: "Inter", sans-serif;
  --text-jumbo-size: calc(70px * var(--text-size-factor));
  --text-jumbo-color: #ffffff;
  --text-jumbo-weight: 200;
  --text-jumbo-transform: none;
  --text-jumbo-spacing: 0;
  --text-h1-font: "Inter", sans-serif;
  --text-h1-size: calc(22px * var(--text-size-factor));
  --text-h1-color: #cccccc;
  --text-h1-weight: 300;
  --text-h1-transform: capitalize;
  --text-h1-spacing: 0;
  --text-h2-font: system-ui, -apple-system, sans-serif;
  --text-h2-size: calc(15px * var(--text-size-factor));
  --text-h2-color: #d2d2d2;
  --text-h2-weight: 800;
  --text-h2-transform: uppercase;
  --text-h2-spacing: 0.08em;
  --text-c1-font: system-ui, -apple-system, sans-serif;
  --text-c1-size: calc(16px * var(--text-size-factor));
  --text-c1-color: #8f8f8f;
  --text-c1-weight: 400;
  --text-c1-transform: capitalize;
  --text-c1-spacing: 0;
  --text-c2-font: "Inter", sans-serif;
  --text-c2-size: calc(14px * var(--text-size-factor));
  --text-c2-color: #8f8f8f;
  --text-c2-weight: 300;
  --text-c2-transform: none;
  --text-c2-spacing: 0;
  --text-c3-font: "Inter", sans-serif;
  --text-c3-size: calc(13px * var(--text-size-factor));
  --text-c3-color: #8e8e8e;
  --text-c3-weight: 400;
  --text-c3-transform: none;
  --text-c3-spacing: 0;
  --text-s1-font: "Inter", sans-serif;
  --text-s1-size: calc(12px * var(--text-size-factor));
  --text-s1-color: #cacaca;
  --text-s1-weight: 700;
  --text-s1-transform: uppercase;
  --text-s1-spacing: 0;
  --text-s2-font: "JetBrains Mono", "Fira Code", monospace;
  --text-s2-size: calc(12px * var(--text-size-factor));
  --text-s2-color: #969696;
  --text-s2-weight: 400;
  --text-s2-transform: none;
  --text-s2-spacing: 0;

  /* What this surface supplies for itself. It has no settings system behind it, so these are written here rather than at runtime. */
  --accent: #834eff;
  --text-size-factor: 1;
}

/*
 * The Visual Language's base: what every BrainTwo surface starts from before it
 * styles anything of its own. The document's typography and background, links,
 * buttons, the one focus ring, and the three Surface States.
 *
 * No surface imports this file. The emitter inlines it underneath that
 * surface's token block and writes the pair out as
 * visual-language.generated.css - for the web app the same way as for the
 * console, the ledger UI and the landing page, which are static HTML with no
 * build step and could not import it even if we wanted them to. So the text
 * below is the only copy, which is what stops the surfaces drifting apart.
 * Editing it means regenerating: pnpm --filter @braintwo/web generate:artifacts.
 *
 * Nothing here may name a custom property the token block does not define: an
 * emitted surface has no app behind it to fill one in, so a stray name would
 * silently fall through to nothing. The generated-CSS test checks exactly that.
 */

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

/* `color-scheme: dark` themes every native control (date pickers, select
   popups, number spinners, scrollbars) document-wide. */
html {
  color-scheme: dark;
}

/* The document reads at c2, the app's ordinary body level, on the Elevation
   Scale's ground Step. Every surface inherits from here down. */
body {
  font-family: var(--text-c2-font);
  font-size: var(--text-c2-size);
  font-weight: var(--text-c2-weight);
  color: var(--text-c2-color);
  text-transform: var(--text-c2-transform);
  letter-spacing: var(--text-c2-spacing);
  background: var(--elevation-0);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  font-family: var(--text-c1-font);
  font-size: var(--text-c1-size);
  font-weight: var(--text-c1-weight);
  color: var(--text-c1-color);
  text-transform: var(--text-c1-transform);
  letter-spacing: var(--text-c1-spacing);
  border: none;
  border-radius: var(--radius-3);
  padding: var(--space-3) var(--space-6);
  transition: background var(--motion-2);
}

/* The wordmark: the product's name set as artwork, worn wherever a surface says
   which BrainTwo you are looking at - the app's Sidebar, the console's and the
   ledger UI's page header.

   Not an Interface Text level, and the one place on these surfaces where that is
   true. A level is a reading voice, and this is not being read: it is the brand,
   which is why it is heavy and white while every page title around it is light
   and grey. Its size is fixed for the same reason the Sidebar's always was -
   growing it with Text Size would change the brand rather than the reading -
   and the Interface Text guard holds that as a signed exception. */
.wordmark {
  font-family: var(--text-jumbo-font);
  font-size: 34px;
  font-weight: 700;
  color: var(--text-jumbo-color);
  letter-spacing: normal;
  white-space: nowrap;
}

/* The divider: the thin line that separates one block of a surface from the
   next. One weight and one colour wherever it is drawn, so the Sidebar's rail,
   a Settings card and the scope ladder cannot end up wearing three slightly
   different lines. What insets it from the edges stays with the site, because
   that follows the gutter the line is sitting in. */
.divider {
  height: var(--border-width-1);
  background: var(--border-color);
  /* A line is never what gives way when a column runs short of room. */
  flex-shrink: 0;
}

/* The focus ring, declared once for every surface.

   `:focus-visible`, never `:focus`: the ring is for someone navigating by
   keyboard, and a pointer click should not leave one behind. Text inputs match
   `:focus-visible` however they were focused, which is what a writer expects.

   A control that already marks the keyboard position some other way turns the
   ring off in its own stylesheet and says why - the Select List's moving bar,
   a field box that turns accent. Those are the only two reasons, and both are
   held by the focus guard's exception list. */
:focus-visible {
  outline: var(--state-focus-ring-width) solid var(--state-focus-ring-color);
  outline-offset: var(--state-focus-ring-offset);
}

/* Surface States: what a whole View, Manager, Settings page or console card is,
   as against what one element is doing under the pointer (that is an
   Interaction State). Three of them - loading, empty, error - and one voice for
   all three, so a View waiting for data and a console card with nothing in it
   read the same way.

   The class goes on the message a surface shows in place of its content. Where
   the message sits is the surface's own business and stays in its stylesheet;
   what the message looks like is here. */
.surface-state {
  padding: var(--space-7) var(--space-6);
  text-align: center;
  font-family: var(--text-c2-font);
  font-size: var(--text-c2-size);
  font-weight: var(--text-c2-weight);
  color: var(--text-h2-color);
  text-transform: var(--text-c2-transform);
  letter-spacing: var(--text-c2-spacing);
}

/* The same message inside a panel rather than filling a surface: same voice,
   less room to breathe. */
.surface-state--inline {
  padding: var(--space-4) 0;
}

/* Loading and empty both say "nothing to show yet" and say it quietly. Error is
   the one that has to be noticed. */
.surface-state--error {
  color: var(--danger);
}