/* The Bellatrix token layer, shared in substance with the Marine Underwriting
   workspace. Components reference these by name, never by hex. That rule is the
   whole point of the design system, and it is what makes a second theme a
   forty line block rather than a rewrite of ninety components.

   Two themes, one set of names. Light is the default. Dark re-points the same
   properties and changes nothing else, which is why every screen, drawer,
   table and chart follows without being touched.

   Source of truth: design-system/tokens.json. */
:root{
  --ba-control-h:30px;
  /* chrome */
  --bg:#f5f7fa; --surface:#ffffff; --surface-2:#fbfcfe;
  --ink:#1a1b1e; --muted:#535559; --muted-2:#84878d;
  --line:#e4e6eb; --line-strong:#d3d7de;

  /* accent */
  --accent:#C7D6F1; --accent-soft:#DBE5F6; --accent-ink:#335CA6; --slate:#4472C4;
  --accent-deep:#2A529E;

  /* semantic state */
  --green:#1f6f3c; --green-bg:#e7f3ec;
  --amber:#8a5a12; --amber-bg:#f6eede;
  --red:#9c2b2b;   --red-bg:#f7e9e9;
  --blue:#2f5d8f;  --blue-bg:#e8f0f8;
  --purple:#6b4fa0;--purple-bg:#efeafb;

  /* type. The same stack the Marine Underwriting workspace uses: the operating
     system's own interface face, so the two products read as one and neither
     waits on a font from a CDN before it can paint. */
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* geometry */
  --radius:8px; --radius-sm:6px;
  /* The topbar's height, published so the rail and the sub-tab strip pin
     themselves under it rather than under a number typed three times. The
     lockup sets it: 60px mark plus 10px above and below plus the hairline. */
  --topbar-h:81px;
  /* The scrim behind a drawer. It cannot be --ink at low opacity: --ink is
     near white in the dark theme, so that scrim would light the page up
     instead of dimming it. */
  --scrim:rgba(26,27,30,.34);
  --shadow:0 6px 20px rgba(26,27,30,.08); --shadow-sm:0 1px 2px rgba(26,27,30,.06);

  /* Brand blocks: the new engagement tile, the wizard card, the lead figure on
     the Value screen. These are a deep blue panel with white type in BOTH
     themes, so they cannot be built from --accent-deep and --slate, which
     invert. A brand panel that turns pale in the dark theme stops reading as
     the brand and starts reading as a bug. */
  --brand-block:#2A529E; --brand-block-2:#4472C4;
  --brand-block-ink:#ffffff; --brand-block-soft:#C7D6F1;

  /* drawer chrome, from the Lightspeed control platform. Already dark in both
     themes: the AI activity lid is a terminal surface by design. */
  --panel-dark:#11131a; --panel-dark-2:#171a20; --panel-line:#2a2e36;
  --panel-text:#C9D8F1; --panel-text-2:#e6e9ee; --panel-muted:#8a929e;
  --timeline:#1D3B74; --timeline-head:#2A529E; --timeline-line:#4472C4;
  --timeline-text:#E2EAF8; --timeline-muted:#A3BCE5; --timeline-dot:#A9C4F0;

  color-scheme:light;
}

/* ---------------------------------------------------------------- dark theme
   Set on <html> before first paint, so the screen never flashes white on the
   way to being dark.

   Two rules govern the values. Every pairing keeps its contrast: a token used
   as ink on a token used as ground clears the same ratio it clears in light,
   which is why the blues move up the ramp rather than being reused. And the
   semantic pairs stay pairs: --red on --red-bg still reads as a failure, so no
   component has to know which theme it is in. */
html[data-theme="dark"]{
  --bg:#0E1420; --surface:#151C2B; --surface-2:#1A2334;
  --ink:#E6EDF7; --muted:#93A1B5; --muted-2:#6B7A90;
  --line:#223047; --line-strong:#2C3D58;

  /* --accent and --accent-soft are fills. --accent-ink is the strong colour
     printed on them, and it is also the ground of the primary button, whose
     label is --surface. Both readings hold once the pair is inverted. */
  --accent:#22314C; --accent-soft:#1D2A42; --accent-ink:#8FB4F0; --slate:#A8C4F2;
  --accent-deep:#B9D0F7;

  --green:#4ADE80; --green-bg:#14281F;
  --amber:#FBBF24; --amber-bg:#2A2213;
  --red:#F97066;   --red-bg:#2A1A1C;
  --blue:#7FB0E8;  --blue-bg:#14243A;
  --purple:#B49CE8;--purple-bg:#221C33;

  --shadow:0 18px 48px rgba(0,0,0,.62); --shadow-sm:0 1px 2px rgba(0,0,0,.40);
  --scrim:rgba(0,0,0,.62);
  /* One step deeper on the dark ground, where #2A529E would glow. */
  --brand-block:#1D3B74; --brand-block-2:#2F5CAF;

  color-scheme:dark;
}