/* ============================================
   HFS Admin — Base Tokens
   ============================================ */

:root {
	--hfs-overlay-backdrop: rgba(0,0,0,0.70);
	/* --- Theme semantic variables (admin-wide) --- */
	--hfs-sidebar-bg: var(--hfs-brown-dark);
	--hfs-sidebar-text: var(--hfs-cream);
	--hfs-sidebar-text-muted: var(--hfs-brown-light);
	--hfs-sidebar-hover-bg: rgba(255,255,255,0.08);
	--hfs-sidebar-active-bg: rgba(255,255,255,0.12);
	--hfs-sidebar-active-text: var(--hfs-gold, #C9A94E);
	--hfs-brand-accent: var(--hfs-gold, #C9A94E);
	--hfs-brand-text: var(--hfs-gold, #C9A94E);
	--hfs-topbar-text: var(--hfs-cream);

	--hfs-btn-primary-bg: var(--hfs-brown-dark);
	--hfs-btn-primary-border: var(--hfs-brown-dark);
	--hfs-btn-primary-text: #ffffff;

	--hfs-btn-secondary-bg: transparent;
	--hfs-btn-secondary-border: var(--hfs-border);
	--hfs-btn-secondary-text: var(--hfs-text);
	--hfs-btn-secondary-hover-bg: rgba(0,0,0,0.04);

	--hfs-checkbox-accent: var(--hfs-green-dark);

	--hfs-brown: #5C3D2E;
	--hfs-brown-light: #8B6F47;
	--hfs-brown-dark: #4A3728;
	--hfs-cream: #f5ede0;
	--hfs-cream-dark: #eee5d8;
	--hfs-green: #4A7C59;
	--hfs-green-light: #6B9E76;
	--hfs-green-dark: #2E5339;
	--hfs-rust: #B7472A;
	--hfs-tan: #b8a88a;
	--hfs-tan-light: #d4c4a8;
	--hfs-tan-dark: #a69878;

	/* --- Layout tokens --- */
	--hfs-topbar-height: 42px;
	--hfs-control-height: 36px;
	--hfs-control-btn-height: 35px;
	--hfs-radius: 10px;
	--hfs-shadow: 0 10px 24px rgba(0,0,0,0.08);

	/* --- Bar tokens (topbar / brand strip) --- */
	--hfs-bar: var(--hfs-brown-dark);
	--hfs-bar-text: #FFFFFF;

	/* --- POS section header bars (e.g., Product Search counts) --- */
	--hfs-subbar-bg: rgba(124, 90, 46, 0.10);
	--hfs-subbar-border: var(--hfs-border);
	--hfs-subbar-text: var(--hfs-bar);

	/* --- Register row action buttons (Product Search, Order Pickup, staging qty) --- */
	--hfs-register-row-action-btn-bg: var(--hfs-surface);
	--hfs-register-row-action-btn-border: var(--hfs-bar);
	--hfs-register-row-action-btn-text: var(--hfs-bar);
	--hfs-register-row-action-btn-hover-bg: var(--hfs-bar);
	--hfs-register-row-action-btn-hover-border: var(--hfs-bar);
	--hfs-register-row-action-btn-hover-text: var(--hfs-bar-text);
	--hfs-register-row-action-btn-md-size: 28px;
	--hfs-register-row-action-btn-sm-size: 24px;

	/* --- Sub-table (nested detail rows inside a parent table) --- */
	--hfs-subtable-head-bg: transparent;
	--hfs-subtable-head-text: var(--hfs-text);
	--hfs-subtable-border-bottom: var(--hfs-text);


/* --- Additional semantic tokens to eliminate hard-coded hex usage --- */
	--hfs-brown-mid: #4E342E;
	--hfs-brown-deep: #3A2B26;
	--hfs-brown-panel-border: #5A4A3A;
	--hfs-brown-panel-hover: #4A3A2A;
	--hfs-green-olive: #3A5A2E;
	--hfs-accent-orange: #C97B2A;
	--hfs-accent-orange-light: #D4B87A;
	--hfs-danger: #B7472A;
	--hfs-danger-bg: #FCA5A5;

	/* POS and component semantic tokens (migrated from core/hfs-base.css) */
	--hfs-stock-in: #6ee7b7;
	--hfs-stock-low: #fbbf24;
	--hfs-stock-low-strong: #b45309;
	--hfs-accent-warn: #D4A017;
	--hfs-gray-action: #6B6B6B;

	/* POS payment button colors */
	--hfs-pay-cash-bg: #27ae60;
	--hfs-pay-cash-hover-bg: #219a52;
	--hfs-pay-card-bg: #2980b9;
	--hfs-pay-card-hover-bg: #2171a5;

	/* Category gradients (used by storefront cards; kept tokenized) */
	--hfs-cat-pet-grad-start: #5c3618;
	--hfs-cat-pet-grad-end: #4a2810;
	--hfs-cat-pet-accent: #f0a05e;
	--hfs-cat-health-grad-start: #244a6e;
	--hfs-cat-health-grad-end: #1a3a5c;
	--hfs-cat-health-accent: #6cb4e8;
	--hfs-cat-farm-grad-start: #3a3a42;
	--hfs-cat-farm-grad-end: #2a2a32;
	--hfs-cat-farm-accent: #9ca3af;
	--hfs-cat-garden-grad-start: #3a4a28;
	--hfs-cat-garden-grad-end: #2a3a1a;
	--hfs-cat-garden-accent: #a3e635;
	--hfs-cat-apparel-grad-start: #3a2d68;
	--hfs-cat-apparel-grad-end: #2a2050;
	--hfs-cat-apparel-accent: #a5b4fc;

	/* Cancel hover (legacy) */
	--hfs-cancel-hover-bg: #932E1A;
	--hfs-cancel-accent: #F5A898;

	/* Empty state / subdued text — use token not opacity */
	--hfs-empty-state-text: var(--hfs-text-muted);
	--hfs-empty-state-icon: var(--hfs-text-muted);

	/* POS sidebar-right tokens */
	--hfs-pos-sidebar-bg: linear-gradient(180deg, var(--hfs-brown-dark) 0%, var(--hfs-brown-mid) 100%);
	--hfs-pos-sidebar-border: var(--hfs-onbar-bg-tint-4);
	--hfs-pos-sidebar-text: var(--hfs-cream);
	--hfs-pos-sidebar-text-muted: var(--hfs-brown-light);
	--hfs-pos-header-bg: var(--hfs-brown-deep);
	--hfs-pos-header-text: var(--hfs-cream);
	--hfs-pos-customer-bg: rgba(255,255,255,0.04);
	--hfs-pos-customer-border: var(--hfs-onbar-bg-tint-4);
	--hfs-pos-customer-text: var(--hfs-cream);
	--hfs-pos-customer-text-muted: var(--hfs-brown-light);
	--hfs-pos-action-bg: var(--hfs-brown-light);
	--hfs-pos-action-text: var(--hfs-bg-alt);
	--hfs-pos-keybtn-bg: var(--hfs-bg-alt);
	--hfs-pos-keybtn-border: var(--hfs-brown-light);
	--hfs-pos-keybtn-text: var(--hfs-brown-dark);
	--hfs-pos-keybtn-hover-bg: var(--hfs-brown);
	--hfs-pos-keybtn-hover-text: var(--hfs-bg-alt);
	--hfs-pos-process-bg: var(--hfs-green);
	--hfs-pos-process-text: var(--hfs-bg-alt);
	--hfs-pos-process-hover-bg: var(--hfs-green-dark);
	--hfs-pos-summary-bg: rgba(0,0,0,0.15);
	--hfs-pos-summary-text: var(--hfs-cream);
	--hfs-pos-summary-border: var(--hfs-onbar-bg-tint-4);

	/* Destructive button */
	--hfs-btn-danger-bg: var(--hfs-danger);
	--hfs-btn-danger-border: var(--hfs-danger);
	--hfs-btn-danger-text: #ffffff;
	--hfs-btn-danger-hover-bg: var(--hfs-danger-strong);

	/* Neutral/tertiary button (Guest, etc.) */
	--hfs-btn-neutral-bg: transparent;
	--hfs-btn-neutral-border: var(--hfs-border);
	--hfs-btn-neutral-text: var(--hfs-text-muted);
	--hfs-btn-neutral-hover-bg: var(--hfs-surface-tint-2);

}


/* Generated alpha color literals (used via var() to keep non-token files free of rgba()) */
:root {
	/* --- Alpha/overlay tokens (semantic) --- */
	/* Surface tints / shadows */
	--hfs-border-subtle: rgba(0,0,0,0.12);
	--hfs-shadow-brown: rgba(62,39,35,0.08);
	--hfs-shadow-brown-faint: rgba(62,39,35,0.04);
	--hfs-shadow-brown-soft: rgba(62,39,35,0.06);
	--hfs-shadow-brown-strong: rgba(62,39,35,0.1);
	--hfs-shadow-lg: rgba(0,0,0,0.2);
	--hfs-shadow-md: rgba(0,0,0,0.18);
	--hfs-shadow-sm: rgba(0,0,0,0.15);
	--hfs-shadow-xl: rgba(0,0,0,0.35);
	--hfs-shadow-xxl: rgba(0,0,0,0.4);
	--hfs-shadow-xxxl: rgba(0,0,0,0.45);
	--hfs-surface-tint-1: rgba(0,0,0,0.02);
	--hfs-surface-tint-2: rgba(0,0,0,0.04);
	--hfs-surface-tint-3: rgba(0,0,0,0.05);
	--hfs-surface-tint-4: rgba(0,0,0,0.06);
	/* On-bar / on-dark (borders & text) */
	--hfs-onbar-bg-tint-1: rgba(255,255,255,0.05);
	--hfs-onbar-bg-tint-2: rgba(255,255,255,0.06);
	--hfs-onbar-bg-tint-3: rgba(255,255,255,0.08);
	--hfs-onbar-bg-tint-4: rgba(255,255,255,0.10);
	--hfs-onbar-border: rgba(255,255,255,0.14);
	--hfs-onbar-border-15: rgba(255,255,255,0.15);
	--hfs-onbar-border-20: rgba(255,255,255,0.2);
	--hfs-onbar-border-max: rgba(255,255,255,0.3);
	--hfs-onbar-border-soft: rgba(255,255,255,0.12);
	--hfs-onbar-border-strong: rgba(255,255,255,0.22);
	--hfs-onbar-border-stronger: rgba(255,255,255,0.25);
	--hfs-onbar-text: rgba(255,255,255,0.85);
	--hfs-onbar-text-disabled: rgba(255,255,255,0.5);
	--hfs-onbar-text-muted: rgba(255,255,255,0.75);
	--hfs-onbar-text-muted-2: rgba(255,255,255,0.72);
	--hfs-onbar-text-muted-strong: rgba(255,255,255,0.78);
	--hfs-onbar-text-muted-stronger: rgba(255,255,255,0.80);
	/* Focus (borders & rings) */
	--hfs-border-focus: rgba(124,90,46,0.35);
	--hfs-border-focus-soft: rgba(124,90,46,0.22);
	--hfs-border-focus-strong: rgba(124,90,46,0.45);
	--hfs-fill-focus-soft: rgba(124,90,46,0.28);
	--hfs-focus-ring-neutral: rgba(184,168,138,0.3);
	--hfs-ring-focus: rgba(124,90,46,0.12);
	--hfs-ring-rust: rgba(180,80,50,0.2);
	/* Brand accents (gold) */
	--hfs-gold-border: rgba(201,169,78,0.16);
	--hfs-gold-border-strong: rgba(201,169,78,0.18);
	--hfs-gold-fill: rgba(201,169,78,0.12);
	--hfs-gold-fill-strong: rgba(201,169,78,0.14);
	--hfs-gold-fill-subtle: rgba(201,169,78,0.08);
	--hfs-gold-glow: rgba(201,169,78,0.45);
	--hfs-gold-glow-strong: rgba(201,169,78,0.55);
	--hfs-gold-hover: rgba(201,169,78,0.2);
	--hfs-gold-panel-fill: rgba(184,137,45,0.10);
	--hfs-gold-surface: rgba(201,169,78,0.3);
	/* States (success/danger/info) */
	--hfs-danger-border: rgba(183,71,42,0.28);
	--hfs-danger-chart-fill: rgba(239,68,68,0.3);
	--hfs-danger-fill: rgba(183,71,42,0.25);
	--hfs-danger-fill-subtle: rgba(183,71,42,0.10);
	--hfs-info-fill-subtle: rgba(74,144,226,0.25);
	--hfs-success-accent-strong: rgba(74,124,89,0.95);
	--hfs-success-border: rgba(74,124,89,0.30);
	--hfs-success-fill: rgba(74,124,89,0.2);
	--hfs-success-fill-subtle: rgba(74,124,89,0.14);
	/* POS accents */
	--hfs-pos-accent-delivery: rgba(74,144,226,0.75);
	--hfs-pos-accent-discount: rgba(74,124,89,0.75);
	--hfs-pos-accent-hold: rgba(212,160,23,0.75);
	--hfs-pos-accent-neutral: rgba(107,107,107,0.75);
	--hfs-pos-accent-nosale: rgba(139,111,71,0.75);
	--hfs-pos-accent-pickup: rgba(59,125,216,0.75);
	--hfs-pos-accent-register: rgba(92,61,46,0.75);
	--hfs-pos-accent-return: rgba(201,123,42,0.75);
	--hfs-pos-accent-void: rgba(183,71,42,0.75);
	/* Charts & highlights */
	--hfs-chart-revenue-fill: rgba(139,111,71,0.7);
	--hfs-chart-sales-fill: rgba(201,169,78,0.15);
	--hfs-highlight-orange-soft: rgba(201,123,42,0.1);
	/* Shadows (warm) */
	--hfs-shadow-brown: rgba(62,39,35,0.08);
	--hfs-shadow-brown-faint: rgba(62,39,35,0.04);
	--hfs-shadow-brown-soft: rgba(62,39,35,0.06);
	--hfs-shadow-brown-strong: rgba(62,39,35,0.1);
	/* Misc UI */
	--hfs-cream-overlay: rgba(253,245,230,0.5);
	--hfs-gold-panel-fill: rgba(184,137,45,0.10);
	--hfs-hero-glow: rgba(184,168,138,0.08);
	--hfs-product-icon-muted: rgba(92,61,46,0.15);
}