/*
 * Starlight design tokens. Every other sheet in assets/css/ reads these; change a value here
 * to restyle the whole theme. Breakpoints (media queries cannot use custom properties):
 * sm 640px · md 768px · lg 1024px · xl 1280px — mobile first, min-width.
 */
:root {
	/* Brand (design/DESIGN.md) */
	--sl-black: #0F1115;
	--sl-charcoal: #1E232B;
	--sl-slate: #374151;
	--sl-muted: #6B7280;
	--sl-light-gray: #F3F4F6;
	--sl-off-white: #F8F9FA;
	--sl-border: #E5E7EB;
	--sl-border-strong: #D2D5DA;
	--sl-accent: #D97706;
	--sl-accent-hover: #B45309;
	--sl-accent-light: #FEF3C7;
	--sl-white: #fff;

	/* Grays */
	--sl-gray-50: #f9fafb;
	--sl-gray-100: #f3f4f6;
	--sl-gray-200: #e5e7eb;
	--sl-gray-300: #d1d5db;
	--sl-gray-400: #9ca3af;
	--sl-gray-500: #6b7280;
	--sl-gray-600: #4b5563;
	--sl-gray-700: #374151;
	--sl-gray-800: #1f2937;
	--sl-gray-900: #111827;
	--sl-neutral-200: #e5e5e5;
	--sl-neutral-900: #171717;

	/* Amber (accent scale) */
	--sl-amber-50: #fffbeb;
	--sl-amber-100: #fef3c7;
	--sl-amber-200: #fde68a;
	--sl-amber-300: #fcd34d;
	--sl-amber-400: #fbbf24;
	--sl-amber-500: #f59e0b;
	--sl-amber-600: #d97706;
	--sl-amber-700: #b45309;
	--sl-amber-800: #92400e;

	/* Status */
	--sl-emerald-50: #ecfdf5;
	--sl-emerald-200: #a7f3d0;
	--sl-emerald-400: #34d399;
	--sl-emerald-700: #047857;
	--sl-red-50: #fef2f2;
	--sl-red-200: #fecaca;
	--sl-red-600: #dc2626;
	--sl-red-700: #b91c1c;

	/* Type */
	/* Noto Sans Armenian covers the Armenian script, which Inter and Space Grotesk lack. */
	--sl-font-sans: "Inter", "Noto Sans Armenian", sans-serif;
	--sl-font-display: "Space Grotesk", "Noto Sans Armenian", sans-serif;
	--sl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	/* Shape */
	--sl-radius-sm: .25rem;
	--sl-radius-md: .375rem;
	--sl-radius-lg: .5rem;
	--sl-radius-xl: .75rem;
	--sl-radius-2xl: 1rem;
	--sl-radius-full: 9999px;

	/* Corner roles (Customizer → Design: corners). Every component rounds through one of these;
	   inc/customizer-layout.php overrides --sl-radius (the base) and any role set on its own.
	   Circles (dots, avatars, icon buttons, count bubbles, swatches) keep --sl-radius-full. */
	--sl-radius: 8px;
	--sl-r-btn: var(--sl-radius);
	--sl-r-field: var(--sl-radius);
	--sl-r-small: var(--sl-radius);                     /* tabs, chips, nav links, pagination, tables */
	--sl-r-badge: calc(var(--sl-radius) * .5);          /* stock/sale labels, active filters, payment logos */
	--sl-r-img: var(--sl-radius);                       /* thumbnails */
	--sl-r-img-lg: calc(var(--sl-r-img) * 1.5);         /* main gallery image, cart thumbnails */
	--sl-r-card: calc(var(--sl-radius) * 1.5);          /* product cards, account/checkout boxes, icon tiles */
	--sl-r-popup: calc(var(--sl-radius) * 1.5);         /* dropdowns, mega menu, search panel, share menu */
	--sl-r-block: calc(var(--sl-radius) * 2);           /* big sections: heroes, bento, showroom, filters */
	--sl-r-icon: var(--sl-radius-full);                /* header icon buttons (search, account, cart): round by default, px set in Customizer */
	--sl-r-pill: calc(var(--sl-radius) * 9999);         /* search field, cart button, pill labels: fully round, square when the base is 0 */
	--sl-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
	--sl-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
	--sl-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
	--sl-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
	--sl-shadow-card: 0 1px 2px rgba(17, 18, 21, .04), 0 0 0 1px rgba(17, 18, 21, .04);

	/* Motion */
	--sl-duration: 150ms;
	--sl-ease-std: cubic-bezier(.4, 0, .2, 1);
	--sl-ease-apple: cubic-bezier(.32, .72, 0, 1);

	/* Layout */
	--sl-container: 1440px;
	--sl-gutter: 1rem;
}
@media (min-width: 640px) { :root { --sl-gutter: 1.5rem; } }
@media (min-width: 1024px) { :root { --sl-gutter: 3rem; } }