/* =============================================================================
   Cash Bill POS -- design tokens (Phase 0 shared foundation)
   Light only, on purpose: same reasoning as the Order App's glass.css --
   half a dark mode (translucent surfaces going dark while hard-coded ink
   colours stay dark) is worse than none. If dark mode is ever wanted it has
   to cover every screen in one go.

   Colour tokens below are copied from the Order App's glass.css (--gl-*),
   renamed --cb-*. Boss, 2026-09-17 (after seeing Phase 0 screenshots): paper
   size defaults to Letter, print stays on variant A, and "the glass effect
   needs to be more obvious". The base brand/ink tokens are still unchanged
   from the Order App; --cb-a1..a4 (the background colour blocks) and
   --cb-glass have been turned up from the Order App's original values --
   same hue family (teal / blue / peach / lilac), higher saturation and
   alpha, larger blocks -- so the blocks actually read as colour on both the
   1366x768 and 1920x1080 mockup screens instead of a faint tint. The new
   --cb-glass-* block below is Cash Bill POS only (the Order App has no
   equivalent -- it never puts glass under a whole panel of table rows).
   Everything after that section is new for Cash Bill POS: type scale,
   spacing, radius, shadow, solid panel colours, status colours, pill and
   table tokens.
   ============================================================================= */
:root{ color-scheme: light }

:root{
  /* ---- copied from Order App glass.css --gl-* (renamed --cb-*) ---- */
  --cb-brand:   #0B6157;
  --cb-brand-l: #17A896;
  --cb-brand-x: #5FE3CE;
  --cb-ink:     #0E141B;
  --cb-ink2:    rgba(14,20,27,.60);
  --cb-ink3:    rgba(14,20,27,.42);
  --cb-glass:   rgba(255,255,255,.42);
  --cb-hi:      rgba(255,255,255,.96);
  --cb-lo:      rgba(255,255,255,.16);
  --cb-edge:    rgba(14,20,27,.07);
  --cb-chrome:  #F2F5F8;
  --cb-line:    rgba(14,20,27,.12);
  --cb-fill:    rgba(118,118,128,.14);
  --cb-page:    #E9EEF3;
  /* turned up from the Order App's originals (.55/.50/.48/.42, softer channel
     values) so the four blocks are clearly visible behind the app-shell --
     same teal/blue/peach/lilac hue family, higher saturation + alpha. */
  --cb-a1: rgba(56,220,190,.62);
  --cb-a2: rgba(84,156,255,.58);
  --cb-a3: rgba(255,150,92,.56);
  --cb-a4: rgba(182,118,255,.52);

  /* ---- glass panels: for surfaces that carry their OWN text while floating
     over .bg-arcs (results card, bill panel, bills/unpaid/customer main
     content cards) -- never for anything that sits over OTHER text.
     --cb-glass-panel's alpha sits in the .50-.62 band the boss set; blur/
     saturate/brightness copied 1:1 from the Order App's glass.css so the
     two apps read as one family. --cb-glass-thead is the one exception:
     a sticky <thead> inside a .glass panel sits OVER its own scrolling
     rows, so it is deliberately NOT translucent (screenshot-caught row
     text ghosting through it at .88 and again at .95 alpha, both with a
     blur) -- fully solid, just a softer off-white than --cb-panel-2. ---- */
  --cb-glass-panel:        rgba(255,255,255,.60);
  --cb-glass-blur:         blur(20px) saturate(190%) brightness(1.06);
  --cb-glass-thead:        #F5F8F9;  /* solid on purpose -- see comment above */
  --cb-glass-divider:      rgba(14,20,27,.10);
  --cb-glass-zebra:        rgba(255,255,255,.16);
  --cb-glass-hover:        rgba(255,255,255,.26);
  --cb-glass-row-selected: rgba(11,97,87,.24);
  --cb-glass-brand-tint:   rgba(11,97,87,.14);
  --cb-glass-below-cost:   rgba(255,196,120,.60);

  /* ---- font stack: system fonts only, no network font ---- */
  --cb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --cb-font-mono: ui-monospace, "SF Mono", Consolas, monospace;

  /* ---- type scale (px) ---- */
  --cb-fs-12: 12px;
  --cb-fs-13: 13px;
  --cb-fs-14: 14px;
  --cb-fs-16: 16px;
  --cb-fs-20: 20px;
  --cb-fs-28: 28px;

  /* ---- spacing scale (px) ---- */
  --cb-sp-2:  2px;
  --cb-sp-4:  4px;
  --cb-sp-6:  6px;
  --cb-sp-8:  8px;
  --cb-sp-12: 12px;
  --cb-sp-16: 16px;
  --cb-sp-20: 20px;
  --cb-sp-24: 24px;
  --cb-sp-32: 32px;

  /* ---- corner radius (px) ---- */
  --cb-r-sm: 6px;
  --cb-r-md: 10px;
  --cb-r-lg: 14px;
  --cb-r-pill: 999px;

  /* ---- shadow: soft, Apple-style, never heavy ---- */
  --cb-shadow-sm: 0 1px 2px rgba(14,20,27,.06);
  --cb-shadow-md: 0 4px 16px rgba(14,20,27,.10);
  --cb-shadow-lg: 0 12px 36px rgba(14,20,27,.16), 0 2px 8px rgba(14,20,27,.06);

  /* ---- solid panel colours: rule is "glass may sit over the BACKGROUND,
     never over TEXT" -- topbar, dialogs and any panel carrying text use
     these opaque colours, never a translucent one ---- */
  --cb-panel:      #FFFFFF;
  --cb-panel-2:    #F7F9FA;
  --cb-topbar-bg:  #FFFFFF;
  --cb-sidenav-bg: #F7F9FA;
  --cb-modal-bg:   #FFFFFF;
  --cb-modal-scrim:rgba(14,20,27,.32);

  /* ---- divider ---- */
  --cb-divider:      rgba(14,20,27,.12);
  --cb-divider-soft: rgba(14,20,27,.07);

  /* ---- status colours (ok / warn / bad / info / void), fg on light bg ---- */
  --cb-ok-fg:    #0B6B3A;
  --cb-ok-bg:    #E7F3EC;
  --cb-warn-fg:  #B45309;
  --cb-warn-bg:  #FFF3DE;
  --cb-bad-fg:   #B3261E;
  --cb-bad-bg:   #FBE9E7;
  --cb-info-fg:  #1B5FA8;
  --cb-info-bg:  #E9F1FC;
  --cb-void-fg:  #5B6470;
  --cb-void-bg:  #EEF0F2;

  /* ---- pill (capsule badge) ---- */
  --cb-pill-pad-y: 3px;
  --cb-pill-pad-x: 10px;
  --cb-pill-fs:    var(--cb-fs-12);

  /* ---- table row height: high density ---- */
  --cb-row-36: 36px;
  --cb-row-40: 40px;
}