/*
 * CarZoom Design Tokens
 * כל משתני העיצוב של האתר. אין selectors מעבר ל-:root.
 */

:root {
	/* ========= Brand colors ========= */
	--cz-red:      #BC0002;
	--cz-red-600:  #A30002;
	--cz-red-700:  #8B0002;
	--cz-red-100:  #FDECEC;
	--cz-red-50:   #FEF6F6;

	/* ========= Neutrals ========= */
	--cz-ink:       #1A1D24;
	--cz-ink-soft:  #2F3440;
	--cz-muted:     #6B7280;
	--cz-muted-2:   #9CA3AF;
	--cz-surface:   #FFFFFF;
	--cz-soft:      #F7F9FB;
	--cz-soft-2:    #EEF2F6;
	--cz-border:    #E5E7EB;
	--cz-border-2:  #D1D5DB;

	/* ========= Accents ========= */
	--cz-gold:       #C9A961;
	--cz-gold-soft:  #F5EDD8;
	--cz-success:    #0F8A5F;
	--cz-success-soft: #E6F4EE;
	--cz-warn:       #B45309;
	--cz-warn-soft:  #FEF3C7;
	--cz-info:       #1D4ED8;
	--cz-info-soft:  #DBEAFE;

	/* ========= Typography ========= */
	--cz-font: 'Heebo', 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--cz-font-display: 'Heebo', 'Rubik', system-ui, sans-serif;

	--cz-fs-xs:    12px;
	--cz-fs-sm:    14px;
	--cz-fs-md:    16px;
	--cz-fs-lg:    18px;
	--cz-fs-xl:    22px;
	--cz-fs-2xl:   28px;
	--cz-fs-3xl:   36px;
	--cz-fs-4xl:   48px;

	--cz-lh-tight: 1.2;
	--cz-lh-base:  1.55;
	--cz-lh-loose: 1.75;

	--cz-fw-regular: 400;
	--cz-fw-medium:  500;
	--cz-fw-semi:    600;
	--cz-fw-bold:    700;
	--cz-fw-heavy:   800;

	/* ========= Spacing (4-based) ========= */
	--cz-sp-0:  0;
	--cz-sp-1:  4px;
	--cz-sp-2:  8px;
	--cz-sp-3:  12px;
	--cz-sp-4:  16px;
	--cz-sp-5:  20px;
	--cz-sp-6:  24px;
	--cz-sp-8:  32px;
	--cz-sp-10: 40px;
	--cz-sp-12: 48px;
	--cz-sp-16: 64px;
	--cz-sp-20: 80px;

	/* ========= Radii ========= */
	--cz-radius-xs:   4px;
	--cz-radius-sm:   6px;
	--cz-radius-md:  10px;
	--cz-radius-lg:  16px;
	--cz-radius-xl:  24px;
	--cz-radius-pill: 999px;

	/* ========= Shadows ========= */
	--cz-shadow-xs: 0 1px 1px rgba(16, 24, 40, 0.04);
	--cz-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
	--cz-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
	--cz-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);
	--cz-shadow-xl: 0 24px 48px rgba(16, 24, 40, 0.18);

	--cz-focus: 0 0 0 3px rgba(188, 0, 2, 0.30);
	--cz-focus-ink: 0 0 0 3px rgba(26, 29, 36, 0.25);

	/* ========= Layout ========= */
	--cz-container:     1200px;
	--cz-container-narrow: 900px;
	--cz-container-wide:  1440px;

	/* ========= Transitions ========= */
	--cz-transition: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
	--cz-transition-slow: 320ms cubic-bezier(0.2, 0.6, 0.2, 1);

	/* ========= Z-index scale ========= */
	--cz-z-dropdown: 50;
	--cz-z-sticky:   100;
	--cz-z-header:   200;
	--cz-z-backdrop: 900;
	--cz-z-modal:    1000;
	--cz-z-toast:    1100;
}