/**
 * Union Barber HR — design tokens
 *
 * Single source of truth for colour, spacing and type used by the HR dashboard
 * modules. New styles should reference these variables rather than repeating
 * hex codes. Values below match the palette already in use so existing
 * screens are unchanged by adopting them.
 */

:root {
    /* Surface & text */
    --hr-bg: #ffffff;
    --hr-bg-subtle: #f9fafb;
    --hr-bg-muted: #f3f4f6;
    --hr-border: #e5e7eb;
    --hr-border-strong: #d1d5db;
    --hr-text: #111827;
    --hr-text-secondary: #374151;
    --hr-text-muted: #6b7280;
    --hr-text-faint: #9ca3af;

    /* Brand / interactive */
    --hr-primary: #3b82f6;
    --hr-primary-strong: #2563eb;
    --hr-primary-soft: #eff6ff;

    /* Status scale — used for stock state across Inventory and Supplies.
       Always pair the colour with an icon and a word; never colour alone.
       Deliberately has no "no sales" state: items you have stopped ordering
       are marked inactive, which is a decision rather than an inference. */
    --hr-status-ok: #16a34a;
    --hr-status-ok-soft: #f0fdf4;
    --hr-status-low: #f59e0b;
    --hr-status-low-soft: #fffbeb;
    --hr-status-reorder: #ea580c;
    --hr-status-reorder-soft: #fff7ed;
    --hr-status-out: #dc2626;
    --hr-status-out-soft: #fef2f2;

    /* Feedback */
    --hr-success: #059669;
    --hr-warning: #d97706;
    --hr-danger: #dc2626;
    --hr-info: #0284c7;

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

    /* Radii */
    --hr-radius-sm: 4px;
    --hr-radius: 6px;
    --hr-radius-lg: 10px;
    --hr-radius-pill: 999px;

    /* Elevation */
    --hr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --hr-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --hr-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

    /* Type */
    --hr-font-xs: 11px;
    --hr-font-sm: 12px;
    --hr-font-base: 13px;
    --hr-font-md: 14px;
    --hr-font-lg: 16px;
    --hr-font-xl: 20px;

    /* Layout */
    --hr-breakpoint-mobile: 768px;
}