/* =============================================================================
   Trading Blox web screens -- design tokens.

   Every screen links this first and names colours only through these
   variables. Three rules hold the look together:

     - The palette is DERIVED FROM THE LOGO and nothing else: slate #232A33 and
       blue #3E76B8, with logo grey #6B7480. Those three are brand constants --
       do not re-derive them, and do not introduce a fourth hue. The teal that
       used to be the accent is gone; it belonged to no part of the mark.

     - The chrome steps by VALUE rather than repeating one dark tone: dark title
       bar, mid steel identity band, white workspace -- and the ladder inverts
       for the dark theme. Two bands in the same near-black read as one heavy
       slab, which is what this replaces.

     - Symbols, numbers, dates and month codes are set in the mono face with
       tabular figures; prose is set in the UI face. In a table of contract
       specifications that is not decoration, it is what makes columns scan.

   The accent appears TWICE on purpose. --accent is a fill and stays #3E76B8 in
   both themes so the Run Test button keeps its brand weight. --accent-line is
   what strokes, labels and indicators use, and it lightens on dark, because
   #3E76B8 as a hairline or a 9.5px label on #1B2027 is too dim to read.

   WINDOWS IS THE DEFAULT. A screen with no theme chosen follows the OS, so the
   application arrives in the scheme the desktop is already in. :root still
   carries the light values -- they are the base every other block overrides,
   and the fallback when the browser cannot answer the media query -- but
   "no choice stored" now resolves through the dark media query below rather
   than stopping here. Light and dark are both explicit choices; see boot.js.
   ========================================================================== */

:root{
  /* ---- workspace ---- */
  --ground:#FFFFFF; --panel:#FFFFFF; --panel-2:#F7F9FB; --panel-3:#F7F9FB;
  --input:#FFFFFF;
  --ink:#232A33; --ink-2:#3A424D; --ink-3:#7C8695;
  --rule:#E4E9EE; --rule-soft:#EEF2F6; --rule-strong:#CFD6DE;

  /* ---- accent: the logo's blue ---- */
  --accent:#3E76B8; --accent-hover:#356AA8; --accent-press:#2F5C93;
  --accent-line:#3E76B8; --accent-ink:#FFFFFF; --accent-soft:#E7EEF7;

  /* ---- chrome: title bar, identity band, rail ---- */
  --titlebar:#232A33; --titlebar-ink:#C4CBD4; --titlebar-ink-muted:#7C8695;
  --band:#DCE3EA; --band-ink:#2E3641; --band-border:#C3CCD6;
  --band-hover:#EEF2F6; --band-divider:#B4BEC9;
  --rail:#EEF1F5; --rail-border:#D5DCE4; --rail-ink:#5C6675;
  --rail-hover:#E3E8EF; --rail-active:#FFFFFF;
  --seg:#EEF2F6; --seg-sel:#FFFFFF; --seg-ink:#6B7480;
  --seg-ink-sel:#232A33; --seg-ink-hover:#232A33;

  /* ---- state. Good, stale and broken -- never decorative, and never the
          accent, which means selection and the primary action only. ---- */
  --ok:#2F8B5B; --warn:#B87C24; --bad:#BF453B;
  --ok-soft:#E2F1E9; --warn-soft:#F8EEDC; --bad-soft:#F8E5E3;

  /* Archivo matches the BLOX wordmark and IBM Plex Mono carries the numerics.
     Neither is installed on a user machine, so both lead a stack that falls
     back the way the handoff specifies: Segoe UI for prose, and a mono that
     still has tabular figures for data -- the mono is there for column
     alignment in the parameter fields, so any mono keeps that intent. */
  --ui:Archivo,"Segoe UI Variable Text","Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --data:"IBM Plex Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
}

/* The dark theme: the same ladder upside down. Not an inversion of the light
   values -- the grounds are picked so the band still sits between the title bar
   and the workspace by value, and the blue still reads on all three. */
:root[data-theme="dark"]{
  --ground:#1B2027; --panel:#1E242C; --panel-2:#262D36; --panel-3:#1E242C;
  --input:#232A33;
  --ink:#F2F5F8; --ink-2:#C6CDD6; --ink-3:#8C97A5;
  --rule:#2C333D; --rule-soft:#262D36; --rule-strong:#3C444F;

  --accent:#3E76B8; --accent-hover:#5E8FC9; --accent-press:#2F5C93;
  --accent-line:#5E8FC9; --accent-ink:#FFFFFF; --accent-soft:#1F2A3A;

  --titlebar:#0F1318; --titlebar-ink:#A8B1BC; --titlebar-ink-muted:#6E7885;
  --band:#262D36; --band-ink:#D3D9E0; --band-border:#333B45;
  --band-hover:#333B45; --band-divider:#3C444F;
  --rail:#1E242C; --rail-border:#2C333D; --rail-ink:#8C97A5;
  --rail-hover:#262D36; --rail-active:#131820;
  --seg:#1B2027; --seg-sel:#3C444F; --seg-ink:#9AA4B2;
  --seg-ink-sel:#F2F5F8; --seg-ink-hover:#E6EAEF;

  --ok:#4FBE85; --warn:#DBAD5A; --bad:#E2726A;
  --ok-soft:#12291F; --warn-soft:#2B2312; --bad-soft:#2E1715;
}

/* "Follow Windows" on a dark Windows -- and it is what an unset theme resolves
   to, which is why :root:not([data-theme]) is here beside it. The unset case
   matters for one paint only: boot.js stamps data-theme at parse time, so this
   covers the moment before its script runs. Without it a dark desktop opens
   every screen white and then corrects itself. */
@media (prefers-color-scheme:dark){
  :root[data-theme="system"],
  :root:not([data-theme]){
    --ground:#1B2027; --panel:#1E242C; --panel-2:#262D36; --panel-3:#1E242C;
    --input:#232A33;
    --ink:#F2F5F8; --ink-2:#C6CDD6; --ink-3:#8C97A5;
    --rule:#2C333D; --rule-soft:#262D36; --rule-strong:#3C444F;

    --accent:#3E76B8; --accent-hover:#5E8FC9; --accent-press:#2F5C93;
    --accent-line:#5E8FC9; --accent-ink:#FFFFFF; --accent-soft:#1F2A3A;

    --titlebar:#0F1318; --titlebar-ink:#A8B1BC; --titlebar-ink-muted:#6E7885;
    --band:#262D36; --band-ink:#D3D9E0; --band-border:#333B45;
    --band-hover:#333B45; --band-divider:#3C444F;
    --rail:#1E242C; --rail-border:#2C333D; --rail-ink:#8C97A5;
    --rail-hover:#262D36; --rail-active:#131820;
    --seg:#1B2027; --seg-sel:#3C444F; --seg-ink:#9AA4B2;
    --seg-ink-sel:#F2F5F8; --seg-ink-hover:#E6EAEF;

    --ok:#4FBE85; --warn:#DBAD5A; --bad:#E2726A;
    --ok-soft:#12291F; --warn-soft:#2B2312; --bad-soft:#2E1715;
  }
}

/* An explicit light choice beats everything above it, including "system" on a
   dark Windows -- the user asked for light on this machine. */
:root[data-theme="light"]{
  --ground:#FFFFFF; --panel:#FFFFFF; --panel-2:#F7F9FB; --panel-3:#F7F9FB;
  --input:#FFFFFF;
  --ink:#232A33; --ink-2:#3A424D; --ink-3:#7C8695;
  --rule:#E4E9EE; --rule-soft:#EEF2F6; --rule-strong:#CFD6DE;

  --accent:#3E76B8; --accent-hover:#356AA8; --accent-press:#2F5C93;
  --accent-line:#3E76B8; --accent-ink:#FFFFFF; --accent-soft:#E7EEF7;

  --titlebar:#232A33; --titlebar-ink:#C4CBD4; --titlebar-ink-muted:#7C8695;
  --band:#DCE3EA; --band-ink:#2E3641; --band-border:#C3CCD6;
  --band-hover:#EEF2F6; --band-divider:#B4BEC9;
  --rail:#EEF1F5; --rail-border:#D5DCE4; --rail-ink:#5C6675;
  --rail-hover:#E3E8EF; --rail-active:#FFFFFF;
  --seg:#EEF2F6; --seg-sel:#FFFFFF; --seg-ink:#6B7480;
  --seg-ink-sel:#232A33; --seg-ink-hover:#232A33;

  --ok:#2F8B5B; --warn:#B87C24; --bad:#BF453B;
  --ok-soft:#E2F1E9; --warn-soft:#F8EEDC; --bad-soft:#F8E5E3;
}