/*
 * Pontem retint of the Industry design system - "surveillance console".
 *
 * The app used to be Industry's light paper ground with a Pontem teal accent.
 * The current design direction (.design-ref/console-dark.png) is a dark
 * operations console: near-black navy grounds, hairline blue-grey panel
 * edges, cyan for anything the model computed or the operator can edit, and
 * monospace numerals throughout. Only token values change here - every
 * Industry component class in industry.css is untouched, which is why the
 * retint carries through to classes this app never mentions by name.
 *
 * Colours and headings are pinned to the Pontem Analytics brand guide
 * (midnight, bright-cyan, tower, crystal, sun) and Titillium Web, rather
 * than the console's original ad hoc navy/blue and Barlow pairing.
 *
 * RAMP DIRECTION IS INVERTED FROM INDUSTRY'S. On a light ground Industry
 * reads 100 as "lightest tint fill" and 800/900 as "dark text on that fill".
 * On this ground the same two roles are the other way round, so the ramps run
 * 100 = deepest ... 900 = brightest. That keeps Industry's own pairings
 * (`.tag-*` uses bg:100 / color:800, `.notice` uses bg:100 / border:300)
 * legible without editing a single one of its rules.
 */

:root {
  /* Grounds, pinned to the brand guide's midnight (#001E33) rather than the
     desaturated navy the console started from. --color-bg is the working
     canvas; --color-surface is a panel lifted off it. The chrome bar and
     page shells reach one step deeper still, via --color-ground. */
  --color-ground: #061521;
  --color-bg: #081624;
  --color-surface: #0d1a2c;
  /* An input or plot well - sunk *below* the panel it sits in. */
  --color-inset: #071625;

  --color-text: #d9e3f4;
  --color-accent: #30adaa;
  --color-accent-2: #7b9fa1;
  --color-divider: #18273f;

  /* Cyan ramp, pinned to the brand guide's bright-cyan (#44FFF5) at 900 -
     computed values, editable inputs, active nav, series 1. 100 is the tint
     fill that carries bright text; 900 is the brightest ink. */
  --color-accent-100: #0f2a32;
  --color-accent-200: #13373f;
  --color-accent-300: #17494f;
  --color-accent-400: #1e6568;
  --color-accent-500: #278989;
  --color-accent-600: #30adaa;
  --color-accent-700: #39d2cc;
  --color-accent-800: #3ee8e0;
  --color-accent-900: #44fff5;

  /* Slate ramp, pinned to the brand guide's tower (#7B9FA1) at 600 and
     fading toward crystal (#DCFFE8) at 900 - chrome, muted labels, disabled
     states, series 4. */
  --color-accent-2-100: #212c2e;
  --color-accent-2-200: #334345;
  --color-accent-2-300: #475d5f;
  --color-accent-2-400: #5b7678;
  --color-accent-2-500: #6d8d8f;
  --color-accent-2-600: #7b9fa1;
  --color-accent-2-700: #9ec1ba;
  --color-accent-2-800: #b9ddcf;
  --color-accent-2-900: #dcffe8;

  /* Neutral ramp, same direction, for anything not carrying brand colour. */
  --color-neutral-100: #1b1f21;
  --color-neutral-200: #2b2f33;
  --color-neutral-300: #3f444a;
  --color-neutral-400: #585d65;
  --color-neutral-500: #747b84;
  --color-neutral-600: #9098a3;
  --color-neutral-700: #adb5c3;
  --color-neutral-800: #c5cede;
  --color-neutral-900: #d9e3f4;

  /* Status roles. The console reads these at a glance, so they are their own
     tokens rather than steps of a ramp: green = converged/nominal,
     amber = watch it (the brand guide's sun, #FFDC00), red = failed. */
  --color-ok: #5dc57b;
  --color-ok-dim: #2f6b45;
  --color-warn: #ffdc00;
  --color-warn-dim: #6d5c1d;
  --color-danger: #f2686a;
  --color-danger-dim: #6b2a30;

  /* Brand bright-cyan for glyphs and series that sit on the deepest grounds. */
  --color-accent-bright: #44fff5;

  /* Numerals, IDs, units and any value the model produced are monospaced -
     it is what makes a column of readings scan as data rather than prose. */
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* Titillium Web is the brand guide's primary typeface, overriding
     Industry's default Barlow/Barlow Condensed pairing. Headings use the
     guide's bold 700 weight; body copy uses 400. */
  --font-heading: "Titillium Web", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Titillium Web", system-ui, sans-serif;

  /* Elevation on a dark ground is a hairline edge plus ambient darkness -
     an ink-tinted drop shadow would be invisible here. */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 18px 44px rgb(0 0 0 / 0.62);

  /* Panels are rounded now, not the wireframe's square corners. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  color-scheme: dark;
}