/**
 * E-POTION Design System — Design Tokens
 *
 * Single source of truth for every design value used across the theme.
 * Defined as CSS custom properties on :root so they cascade everywhere.
 *
 * Naming convention: --ep-{category}-{variant}
 *   examples: --ep-bg-page, --ep-text-primary, --ep-accent-soft
 *
 * RULE: Never hardcode hex values, font sizes, or spacing in feature CSS.
 *       Always reference a token. If a token doesn't exist, add one here
 *       first, then use it. This is what keeps the system coherent.
 *
 * @package Shoptimizer_Child
 * @version 1.0.0
 */

:root {

	/* ====================================================================
	 * 1. Foundation — neutral surfaces
	 * ==================================================================== */
	--ep-bg-page:        #ffffff;
	--ep-bg-surface:     #fafafa;
	--ep-bg-muted:       #f6f7f9;
	--ep-bg-dark:        #0e1116;
	--ep-bg-overlay:     rgba(15, 17, 22, 0.5);

	/* ====================================================================
	 * 2. Borders & lines
	 * ==================================================================== */
	--ep-border-subtle:   #f0f0f2;
	--ep-border-default:  #e5e7eb;
	--ep-border-strong:   #0e1116;

	/* ====================================================================
	 * 3. Text
	 * ==================================================================== */
	--ep-text-primary:        #0e1116;
	--ep-text-secondary:      #4a5058;
	--ep-text-muted:          #6b7280;
	--ep-text-disabled:       #9ca3af;
	--ep-text-on-dark:        rgba(255, 255, 255, 0.92);
	--ep-text-on-dark-muted:  rgba(255, 255, 255, 0.65);

	/* ====================================================================
	 * 4. Brand accent — orange (focused use only)
	 *    Used for: sale tags, free-shipping bar, "Puncte de fidelitate",
	 *    promotional CTAs, urgency moments.
	 *    NOT for: primary buttons, body text, navigation.
	 * ==================================================================== */
	--ep-accent:        #ff6b1a;
	--ep-accent-dark:   #c94200; /* was #d44a00 (4.40:1 on white, 4.21:1 on #fafafa — both fail WCAG AA).
	                                 #c94200 gives 4.94:1 on white, 4.73:1 on #fafafa — both pass. */
	--ep-accent-soft:   #fff3eb;

	/* ====================================================================
	 * 4b. Lights-out moments — age gate, maintenance, "intentional pause"
	 *     Sub-brand for full-page takeover screens. Premium / regulated voice.
	 *     Distinct from --ep-accent (which is the commercial/promotional voice).
	 * ==================================================================== */
	--ep-gold:                 #d4af37;
	--ep-gold-light:           #f4d03f;
	--ep-gold-soft:            rgba(212, 175, 55, 0.15);

	--ep-bg-deep:              #0f0f12;
	--ep-bg-deep-panel:        #1a1a20;
	--ep-bg-deep-border:       #2a2a32;
	--ep-bg-deep-border-soft:  #3a3a44;

	--ep-text-on-deep:         #e8e8ec;
	--ep-text-on-deep-muted:   #a0a0a8;

	/* ====================================================================
	 * 5. Functional — semantic states
	 * ==================================================================== */
	--ep-success:       #10b981;
	--ep-success-dark:  #047857;
	--ep-success-soft:  #ecfdf5;

	--ep-warning:       #f59e0b;
	--ep-warning-dark:  #92400e;
	--ep-warning-soft:  #fffbeb;

	--ep-danger:        #ef4444;
	--ep-danger-dark:   #991b1b;
	--ep-danger-soft:   #fef2f2;

	--ep-info:          #3b82f6;
	--ep-info-dark:     #1e40af;
	--ep-info-soft:     #eff6ff;

	/* ====================================================================
	 * 6. Typography
	 * ==================================================================== */
	--ep-font-xs:    11px;
	--ep-font-sm:    13px;
	--ep-font-base:  15px;
	--ep-font-lg:    17px;
	--ep-font-xl:    20px;
	--ep-font-2xl:   28px;
	--ep-font-3xl:   40px;

	--ep-leading-tight:    1.2;
	--ep-leading-snug:     1.35;
	--ep-leading-normal:   1.55;
	--ep-leading-relaxed:  1.7;

	--ep-weight-regular:   400;
	--ep-weight-medium:    500;
	--ep-weight-semibold:  600;
	--ep-weight-bold:      700;

	--ep-font-stack-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ep-font-stack-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

	/* ====================================================================
	 * 7. Spacing — 4px base scale
	 * ==================================================================== */
	--ep-space-1:   4px;
	--ep-space-2:   8px;
	--ep-space-3:   12px;
	--ep-space-4:   16px;
	--ep-space-5:   20px;
	--ep-space-6:   24px;
	--ep-space-8:   32px;
	--ep-space-10:  40px;
	--ep-space-12:  48px;
	--ep-space-16:  64px;

	/* ====================================================================
	 * 8. Border radius
	 * ==================================================================== */
	--ep-radius-sm:    4px;
	--ep-radius-md:    6px;
	--ep-radius-lg:    12px;
	--ep-radius-xl:    16px;
	--ep-radius-full:  9999px;

	/* ====================================================================
	 * 9. Elevation — shadows
	 * ==================================================================== */
	--ep-shadow-sm:  0 1px 2px rgba(15, 17, 22, 0.04);
	--ep-shadow-md:  0 4px 12px rgba(15, 17, 22, 0.08);
	--ep-shadow-lg:  0 10px 30px rgba(15, 17, 22, 0.12);

	/* ====================================================================
	 * 10. Motion
	 * ==================================================================== */
	--ep-transition-fast:    150ms ease;
	--ep-transition-normal:  250ms ease;
	--ep-transition-slow:    400ms cubic-bezier(0.16, 1, 0.3, 1);

	/* ====================================================================
	 * 11. Z-index scale (avoid arbitrary numbers across files)
	 * ==================================================================== */
	--ep-z-dropdown:  1000;
	--ep-z-sticky:    1100;
	--ep-z-overlay:   1200;
	--ep-z-modal:     1300;
	--ep-z-toast:     1400;
	--ep-z-tooltip:   1500;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ep-transition-fast:    0ms;
		--ep-transition-normal:  0ms;
		--ep-transition-slow:    0ms;
	}
}