/* ============================================================
   ACME Fleet — design tokens (light)

   A certificate operations console on paper.  The shell is
   deliberately achromatic: every colour on screen means a state,
   never decoration.  Warm-neutral base, hairline rules, heavy
   reliance on mono numerals for the data layer.
   ============================================================ */

:root {
  /* -- surfaces: warm paper, faintly green, not clinical white -- */
  --bg:          #F4F6F5;
  --surface-1:   #FFFFFF;   /* panels, tables */
  --surface-2:   #EEF2F1;   /* headers, toolbars */
  --surface-3:   #E3E9E7;   /* hover, selected row */
  --line:        #D6DEDB;   /* hairline */
  --line-strong: #B5C2BE;   /* section rule, input border */
  --line-focus:  #2E8B7D;

  /* -- text -- */
  --text:        #1B2522;
  --text-strong: #0A1310;
  --muted:       #586A65;
  --faint:       #849490;

  /* -- semantic: state only, never decoration.  Darkened for contrast on
        paper; the wash values are the tinted backgrounds. -- */
  --ok:          #0D7355;  --ok-wash:   #E3F2EC;  --ok-dim:   #A5D2C2;
  --warn:        #9A6400;  --warn-wash: #FBF0DB;  --warn-dim: #E7CD9D;
  --err:         #BC3B30;  --err-wash:  #FBEAE7;  --err-dim:  #EEBDB6;
  --info:        #1C5FA8;  --info-wash: #E8F0FA;  --info-dim: #B0CBE7;
  --idle:        #647772;  --idle-wash: #EDF1F0;  --idle-dim: #C8D4D1;

  /* -- brand: logo mark, current tree item, primary action -- */
  --brand:      #10857A;
  --brand-hover:#0C6C63;
  --brand-ink:  #FFFFFF;   /* text on a brand-filled control */

  /* -- type -- */
  --sans: -apple-system, "Segoe UI Variable Text", "Segoe UI",
          "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
          "Roboto Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;

  --fs-micro: 11px;
  --fs-sm:    12px;
  --fs-body:  13px;
  --fs-title: 15px;
  --fs-h1:    22px;
  --fs-metric: 28px;

  /* -- spacing: 4px base -- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* -- shape & elevation -- */
  --r-ctl:   3px;
  --r-panel: 5px;
  --row-h:   32px;
  --topbar-h: 48px;
  --content-max: 1560px;
  /* One shadow, used only for things that genuinely float (toast). */
  --shadow-float: 0 6px 24px rgba(16, 32, 28, .13);
}