/* Design tokens — "AutoDoc Retail System" (stitch_universal_auto_electric_parts/autodoc_retail_system/DESIGN.md).
   Light-first Modern Corporate: primary blue #00529B, CTA yellow #FECB00, Inter,
   1px #E0E0E0 borders instead of shadows. Variable names are kept from the
   previous system so every template keeps working (--sb-navy now means "primary"). */

:root {
	/* Brand — primary blue (trust) + CTA yellow (action) */
	--sb-navy: #00529B;
	--sb-navy-deep: #003B72;
	--sb-navy-mid: #1D5FA8;
	--sb-navy-border: #C2C6D3;
	--sb-navy-line: #2B6CB0;
	--sb-yellow: #FECB00;
	--sb-yellow-dark: #E0B000;
	--sb-yellow-soft: #FFE08B;
	--sb-yellow-hint: #FFF6D6;
	--sb-yellow-text: #6E5700;

	/* Surfaces & text (Material-style tonal layers, no heavy shadows) */
	--sb-bg: #FCF8F9;
	--sb-surface: #FFFFFF;
	--sb-surface-low: #F6F3F4;
	--sb-text: #1B1B1C;
	--sb-text-soft: #424751;
	--sb-text-muted: #5B6270;
	--sb-text-faint: #727782;
	--sb-text-placeholder: #A9AEB9;
	--sb-border: #E5E2E3;
	--sb-border-input: #DDDCDE;
	--sb-row-line: #F0EDEE;
	--sb-topbar-text: #424751;
	--sb-footer-text: #424751;

	/* Status */
	--sb-ok: #15803D;
	--sb-ok-bg: #DCFCE7;
	--sb-danger: #BA1A1A;
	--sb-danger-soft: #93000A;
	--sb-danger-bg: #FFDAD6;

	/* Type — Inter only (DESIGN.md typography). Arabic keeps Noto Kufi via rtl.css. */
	--sb-font: 'Inter', system-ui, -apple-system, sans-serif;
	--sb-font-condensed: var(--sb-font);

	/* Shape — soft and precise: 4px default, 8px for large containers */
	--sb-radius-sm: 4px;
	--sb-radius: 4px;
	--sb-radius-md: 6px;
	--sb-radius-lg: 8px;
	--sb-radius-xl: 12px;

	/* Elevation — reserved for floating elements only (menus, modals, hero card) */
	--sb-shadow-card: 0 8px 24px rgba(27, 27, 28, .10);
	--sb-shadow-card-soft: 0 4px 14px rgba(27, 27, 28, .07);
	--sb-shadow-float: 0 6px 18px rgba(0, 0, 0, .22);
	--sb-shadow-hero: 0 18px 44px rgba(27, 27, 28, .14);

	/* Motion */
	--sb-transition: all .15s ease;
}

body {
	margin: 0;
	background: var(--sb-bg);
	font-family: var(--sb-font);
	color: var(--sb-text);
}

a {
	color: var(--sb-navy);
	text-decoration: none;
}

a:hover {
	color: var(--sb-navy-mid);
}

input::placeholder {
	color: var(--sb-text-faint);
}

/* Material Symbols sizing guard (stylesheet enqueued in functions.php) */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
	line-height: 1;
}

@keyframes sb-toast-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}