/*
  id-brand.css - Injector Dynamics design tokens. SINGLE SOURCE OF TRUTH.

  What this is
    The colors, fonts, and sizes that make every Injector Dynamics page
    look like the same product: the ID Data tool, and every section of
    the future injectordynamics.com rebuild. Any page that wants the ID
    look links this one file:

      <link rel="stylesheet" href="brand-guidelines/id-brand.css">

    The rules (when to use which token, the never/always list) are in
    brand-guidelines.html beside this file. That page links this file
    and renders every token live, so it is also the visual check.
    Those two files are the whole brand kit; nothing else defines the
    look.

  Why it is a separate file (Paul, 2026-09-17)
    The tokens once lived inside id_data.html's <style>, with copies of
    the values in three documents, so every color change meant editing
    four places. A shared design system cannot live inside one page. It has to be a file every page
    includes, so the pages LOAD the truth instead of describing it.
    Now: values live here and nowhere else.

  How to change the look
    Edit a token here. Every page that links this file follows. Do not
    copy a value from this file into another file; reference the token.
    If a page needs a color or size this file does not define, add the
    token HERE, then use it there.

  Provenance
    Blue: set by Paul 2026-09-17 (replaced the wordmark-sampled #0073CF).
    Grays: adopted 2026-09-17 from the ID Fuel Flow Calculator
    (injectordynamics.com/injector-selector) so both tools share one
    family. They carry a slight blue cast; pure neutral grays read
    brownish next to the saturated blue accent.
    Fonts: two. Montserrat for every word a person reads (400 for
    sentences, 700 for labels and titles; never italic), DM Mono for
    every value a person copies. A second face is used only where it
    offers a clear benefit: mono lines digits up. (Paul, 2026-09-18;
    Inter and the italic 800 heading style retired.)
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=DM+Mono:wght@400;500&display=swap');

/*
  Panel sets (Paul, 2026-09-17). Three depths, and each depth is a SET:
  a surface, the border that frames it, and the text that labels it. A
  component uses one set; it never mixes a surface from one with a
  border or label from another. That is how grays stay unscattered.

    set      surface   border   labels   values / titles
    page     --bg      --b      --t3     --t1
    card     --s1      --b      --t3     --t1      (cards, tables, notes, tooltips)
    control  --s2      --b2     --t1     --t1      (inputs, selects, table label cells)

  Interactive outlines (buttons, chips, focus) use --b2 and turn --blue
  on hover/active.
*/
:root {
  /* Surfaces: depth is a lightness step, never a shadow. */
  --bg:      #000000;   /* page, sidebar, topbar (pure black, Paul 2026-09-17) */
  /* Paul chose the four base colors (blue, s1, s2, b) with the ID Color
     Tuner on 2026-09-18; they are the standard for every ID web page
     and app. b2 is derived: one fixed OKLCH lightness step (+0.054)
     above b, same hue and chroma. */
  --s1:      #181C23;   /* cards, tables, selects, tooltips */
  --s2:      #23282F;   /* inputs, row hover, table label cells */

  /* Borders: always 1px. Panels (cards, tables, stat boxes, the sidebar
     boxes, tooltips) take --radius; controls stay square (Paul, 2026-09-18). */
  --radius:  4px;
  --b:       #3F4858;   /* default */
  --b2:      #4D5767;   /* interactive outlines: buttons, chips (b + one step) */

  /* Accent: interaction and identity only, never decoration. */
  --blue:    #0062F9;   /* ID blue, oklch(0.551 0.238 261.0); 4.1:1 on --bg */
  --blue-h:  #1F76FF;   /* hover on solid blue (blue + 0.06 lightness) */
  --blue-d:  rgba(0,98,249,.12);   /* selected / active fills */
  --blue-r:  rgba(0,98,249,.32);   /* focus and hover borders */

  /* Text: three levels only. Ratios are on --bg. */
  --t0:      #FFFFFF;   /* table breakpoints only, with mono 500 on --s2: apart from the data (Paul, 2026-09-19) */
  --t1:      #E6EDF3;   /* primary: values, names, table data (16:1) */
  --t2:      #C9D1D9;   /* secondary: sentences, meta, units (12.3:1) */
  --t3:      #8B949E;   /* labels: micro-labels, dropdown arrows (6.1:1) */

  /* Status. */
  --ok:      #22C55E;   /* copy confirmations only */
  --err:     #E5484D;   /* errors, invalid input, highlighted table cells */

  /* Plot Data overlay (change 80, Paul 2026-09-22). A surface fades from
     its lowest value to its highest through these five; a line is red
     (the same red as --err), a second series orange; the cell lines on
     a surface are the dark gray. */
  --plot-1:      #00E5FF;
  --plot-2:      #22DD22;
  --plot-3:      #FFFF00;
  --plot-4:      #FF8C00;
  --plot-5:      #FF1010;
  --plot-line-1: #E5484D;
  --plot-line-2: #FF8C00;
  --plot-grid:   #737373;

  /* Type voices: two. Numbers are always tabular-nums. */
  --text:    'Montserrat', system-ui, sans-serif;  /* words: 400 sentences, 700 labels and titles */
  --mono:    'DM Mono', monospace;                 /* values: everything a person copies */
  --ls-label: .1em;                                /* the one tracking for uppercase labels (and the app header line) */

  /* Type scale (px). 10 is the floor: nothing renders smaller. */
  --fs-body:   14px;   /* base body, text 400 */
  --fs-card:   13px;   /* APPLICATION and INPUTS titles (uppercase) and the app header line, text 700 */
  --fs-table:  12px;   /* table cells, row labels and stat values, mono; meta, text */
  --fs-input:  11px;   /* input values, mono */
  --fs-label:  10px;   /* section and micro-labels, text 700 uppercase; the floor */
}