/* ==========================================================================
   DESIGN TOKENS
   --------------------------------------------------------------------------
   Colours, fonts and corner radii come from the active theme, served as
   /api/settings/theme.css (built by server/themes.js from the `themes`
   table; admins pick it in Settings > Appearance). That file defines, for
   light and dark:

     surfaces   --bg --panel --panel2 --hover --line --line2
     text       --ink --ink2 --muted
     modules    --c --m --y --k  (+ -soft, -text, -fill, --on-*)
     statuses   --ok --warn --info --caution --dmg --lost (+ -soft, -text)
     type       --font-heading --font-body --font-mono
                --font-display --display-weight (page titles) --font-figures
                (big stat numbers); the heading and mono fonts unless the
                theme names its own
     shape      --radius (cards) --radius-sm (buttons, inputs) --radius-xs
     misc       --shadow-pop --scrim --blend --decor-strip --ui-scale

   x-text is colour x made readable as text (WCAG AA) on panels and on its
   soft background; x-fill is x adjusted so --on-x reads on top of it. Use
   those for text and filled buttons, and the plain colour for bars, dots and
   stripes. Nothing in the app should name a colour directly.

   This file only adds what does not depend on the theme, and a few roles
   built from the tokens above.
   ========================================================================== */
:root {
  /* --- Roles --------------------------------------------------------------- */
  --brand:        var(--c-fill);        /* primary actions, active things   */
  --brand-ink:    var(--on-c);          /* text on a brand-filled surface   */
  --brand-quiet:  var(--c-text);        /* brand as text on a pale surface  */
  --brand-wash:   var(--c-soft);        /* faint brand tint, active rows    */
  --brand-hover:  color-mix(in srgb, var(--brand) 88%, var(--ink));
  --brand-press:  color-mix(in srgb, var(--brand) 76%, var(--ink));
  --focus:        var(--c-text);

  /* --- Shape & depth ------------------------------------------------------- */
  --stripe: 4px;             /* status stripe width on a tool row */
  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent);
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow-menu: 0 12px 28px color-mix(in srgb, var(--ink) 16%, transparent);
  --touch: 44px;             /* smallest tap target on the production floor */

  /* --- Fixed, on purpose -----------------------------------------------------
     These do not follow the theme: a camera viewfinder is always dark, and
     paper (QR labels, barcode labels, printed reports) is always black on
     white so scanners and printers get the contrast they need. */
  --viewport-bg:   #0e1114;
  --viewport-ink:  #b4bcc5;
  --viewport-dim:  #59626c;
  --viewport-veil: rgb(8 10 12 / 45%);
  --paper:         #ffffff;
  --paper-ink:     #000000;
  --paper-ink2:    #3d4349;
  --paper-muted:   #5d646b;
  --paper-line:    #c4c9ce;
  --paper-line2:   #e2e5e8;
  --paper-fill:    #f1f3f5;

  --sidebar-w: 244px;
  --tabbar-h: 62px;
}

/* Per-status helper: every status-coloured thing reads from these two vars,
   set once on an element via [data-status]. --s is the readable version, so
   it works as text on --s-wash as well as for stripes and dots. */
[data-status='available']   { --s: var(--ok-text);      --s-wash: var(--ok-soft); }
[data-status='out']         { --s: var(--info-text);    --s-wash: var(--info-soft); }
[data-status='maintenance'] { --s: var(--caution-text); --s-wash: var(--caution-soft); }
[data-status='damaged']     { --s: var(--dmg-text);     --s-wash: var(--dmg-soft); }
[data-status='lost']        { --s: var(--lost-text);    --s-wash: var(--lost-soft); }
[data-status='overdue']     { --s: var(--warn-text);    --s-wash: var(--warn-soft); }