/* =========================================
   Staff App -- Design Tokens
   Aligned with operator-platform/styles/design-tokens.css.
   Mobile-first: 375px minimum.
   ========================================= */

:root {
    /* Palette -- warm beige chrome (LEAP refresh). Action colours below kept
       intact so operator muscle-memory carries over (green Start, amber Hold,
       etc). The mockup's "monochrome primary" intent is limited to chrome. */
    --chrome:            #ede9e4;
    --background-start:  #ede9e4;
    --background-end:    #ede9e4;
    --color-surface:     #fff;
    --color-primary:     #16a34a;
    --color-primary-hover: #15803d;
    --border-color:      #d4d3d0;
    --border-light:      #e8e7e5;
    --border-medium:     rgba(135, 134, 127, 0.15);
    --neutral:           rgba(0, 0, 0, 0.06);
    --text-color:        #1a1a1a;
    --text-secondary:    #6a6a6a;
    --text-muted:        #a8a8a8;
    --focus-outline:     #16a34a;

    /* Mono action -- reserved for chrome elements (segmented pill text, the
       header brand). Action buttons keep their semantic colours. */
    --act:               #1a1a1a;
    --act-hover:         #2e2e2e;

    /* Scrollbar */
    --scrollbar-thumb: rgba(135, 134, 127, 0.8);
    --scrollbar-track: rgba(0, 0, 0, 0);

    /* Navigation -- single unified chrome (header + tabs). Bottom nav removed. */
    --nav-background:    #ede9e4;
    --nav-hover-bg:      rgba(135, 134, 127, 0.2);
    --nav-active-border: #C7C5BD;
    --icon-stroke:       #16a34a;
    --nav-height:        56px;
    --tab-height:        52px;
    --chrome-height:     108px;
    --bottom-nav-height: 0px;

    /* Semantic colors */
    --success-color: #22c55e;
    --success-hover: #16a34a;
    --danger-color:  #ef4444;
    --danger-hover:  #dc2626;
    --warning-color: #f59e0b;
    --info-color:    #3b82f6;
    --step-active:   #8b5cf6;
    --step-completed: #22c55e;
    --step-pending:  #9ca3af;
    --modal-backdrop: rgba(0, 0, 0, 0.4);
    --card-shadow:    0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
    --card-shadow-hover: 0 2px 6px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);

    /* Bell notification health states */
    --bell-dot-ok:  #22a45a;
    --bell-dot-err: #c93535;

    /* Spacing scale (4px base) */
    --sp-1: 4px;
    --sp-2: 6px;
    --sp-3: 8px;
    --sp-4: 10px;
    --sp-5: 12px;
    --sp-6: 16px;
    --sp-7: 20px;
    --sp-8: 24px;
    --sp-10: 32px;

    /* Typography */
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   16px;
    --text-xl:   18px;

    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-display: 'Lora', Georgia, serif;

    /* Border radius */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   10px;
    --radius-xl:   12px;
    --radius-pill: 100px;
    --radius-full: 50%;
}