/* tokens.css — palette + spacing + typography vars per Feature Inventory §Palette
 * Hex values approximate, sampled from OW HHT screenshots 2026-05-18.
 * Validate with browser eyedropper at icon-design time before final lock. */

:root {
  /* Structural — where the eye expects them, no semantic role */
  --color-page-bg:        #f7f7f8;  /* body background */
  --color-app-bar-bg:     #ffffff;  /* top app bar fill */
  --color-app-bar-text:   #1d2d3d;  /* titles, hamburger, kebab, back-arrow */
  --color-status-bar:     #0e1a26;  /* darker than tile, near-black */

  /* Tile gradient — top-left to bottom-right */
  --color-tile-bg-from:   #1d2d3d;
  --color-tile-bg-to:     #0e1a26;
  --color-tile-label:     #1d2d3d;
  --color-tile-icon:      #ffffff;

  /* Drawer gradient — MORE BLUE than tile, by design */
  --color-drawer-bg-from: #1a3552;
  --color-drawer-bg-to:   #2860a0;
  --color-drawer-text:    #ffffff;

  --color-greyed-tile:    #cfd5da;
  --color-greyed-label:   #8a929a;
  --color-input-blurred:  #9aa0a6;
  --color-divider:        #e1e5e9;

  /* Semantic — each colour = one job */
  --color-action:         #f57c1f;  /* orange: primary action / active mode / focus / scan-line */
  --color-scan-line:      #e02828;  /* red: barcode-glyph scan-line indicator only */
  --color-active-step:    #2c8e3f;  /* green: card border on active step */
  --color-online-dot:     #3bd66a;  /* green: drawer online indicator */
  --color-state-warn:     #d04060;  /* red/pink: Partially Received, errors */

  /* S&G pink — BRAND CHROME ONLY (not action / state / focus) */
  --color-sg-pink:        #EF5190;
  --color-sg-pink-hover:  #d93a79;
  --color-sg-pink-dark:   #b02a60;
  --color-sg-pink-tint:   #fde5ee;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Sizing */
  --tile-size:        90px;
  --tile-grid-gap:    12px;
  --tile-icon-size:   48px;
  --app-bar-height:   48px;
  --android-nav-height: 48px;
  --drawer-width:     280px;
  --card-radius:      8px;

  /* Typography */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-body: 14px;
  --font-size-small: 12px;
  --font-size-title: 16px;
  --font-weight-regular: 400;
  --font-weight-semi:    600;

  /* Z-index layers */
  --z-app-bar:   10;
  --z-drawer:    20;
  --z-overlay:   30;
}