/* ═══════════════════════════════════════════
 * AZRA Automotive — CSS Variables
 * ═══════════════════════════════════════════ */

:root {
	/* ── Colors: Backgrounds ── */
	--color-bg-primary:       #050507;
	--color-bg-secondary:     #0a0a0f;
	--color-bg-card:          #0f0f14;
	--color-bg-card-hover:    #14141c;

	/* ── Colors: Glass-morphism ── */
	--color-glass-bg:         rgba(255, 255, 255, 0.04);
	--color-glass-bg-hover:   rgba(255, 255, 255, 0.07);
	--color-glass-border:     rgba(255, 255, 255, 0.08);
	--color-glass-border-hover: rgba(255, 255, 255, 0.14);

	/* ── Colors: Gold Accent ── */
	--color-gold:             #c9a84c;
	--color-gold-light:       #e8d08a;
	--color-gold-dark:        #a08535;
	--color-gold-gradient:    linear-gradient(135deg, #c9a84c 0%, #e8d08a 50%, #c9a84c 100%);

	/* ── Colors: Text ── */
	--color-text-primary:     #f5f5f0;
	--color-text-secondary:   #a0a0a8;
	--color-text-muted:       #6a6a72;
	--color-text-inverse:     #050507;

	/* ── Colors: Semantic ── */
	--color-success:          #4caf50;
	--color-error:            #ef4444;
	--color-warning:          #f59e0b;
	--color-info:             #3b82f6;

	/* ── Colors: Borders ── */
	--color-border:           rgba(255, 255, 255, 0.08);
	--color-border-light:     rgba(255, 255, 255, 0.12);

	/* ── Typography ── */
	--font-display:           'Bai Jamjuree', sans-serif;
	--font-body:              'Bai Jamjuree', sans-serif;
	--font-mono:              'Bai Jamjuree', sans-serif;

	/* ── Font Sizes (fluid) ── */
	--text-xs:                clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
	--text-sm:                clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
	--text-base:              clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
	--text-lg:                clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
	--text-xl:                clamp(1.2rem, 1rem + 1vw, 1.5rem);
	--text-2xl:               clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	--text-3xl:               clamp(2rem, 1.5rem + 2.5vw, 3rem);
	--text-4xl:               clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
	--text-5xl:               clamp(3rem, 2rem + 5vw, 5.5rem);

	/* ── Spacing ── */
	--space-xs:               0.25rem;
	--space-sm:               0.5rem;
	--space-md:               1rem;
	--space-lg:               1.5rem;
	--space-xl:               2rem;
	--space-2xl:              3rem;
	--space-3xl:              4rem;
	--space-4xl:              6rem;
	--space-5xl:              8rem;

	/* ── Layout ── */
	--container-max:          1400px;
	--container-narrow:       900px;
	--container-padding:      clamp(1rem, 3vw, 3rem);

	/* ── Borders & Radius ── */
	--radius-sm:              4px;
	--radius-md:              8px;
	--radius-lg:              12px;
	--radius-xl:              16px;
	--radius-2xl:             24px;
	--radius-full:            9999px;

	/* ── Shadows ── */
	--shadow-card:            0 4px 24px rgba(0, 0, 0, 0.3);
	--shadow-card-hover:      0 8px 40px rgba(0, 0, 0, 0.5);
	--shadow-gold:            0 4px 20px rgba(201, 168, 76, 0.25);
	--shadow-gold-hover:      0 8px 30px rgba(201, 168, 76, 0.4);

	/* ── Transitions ── */
	--transition-fast:        150ms ease;
	--transition-base:        300ms ease;
	--transition-slow:        500ms ease;
	--transition-smooth:      500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* ── Z-Index Scale ── */
	--z-dropdown:             100;
	--z-sticky:               200;
	--z-overlay:              300;
	--z-modal:                400;
	--z-toast:                500;
}