/*
 * Design System - AELITA
 * tokens.css - primitive and semantic design tokens (values only).
 *
 * Source of truth: docs/aelita-design/DESIGN.md
 * Scope: custom properties only. No component styling.
 * Status: NOT enqueued yet (functions.php untouched) - no effect on the
 *         current theme until it is intentionally integrated.
 */

:root {
	/* ------------------------------------------------------------------ */
	/* Color - primitive                                                   */
	/* ------------------------------------------------------------------ */
	--c-red-600: #cb002c;
	--c-red-700: #a80024;
	--c-red-500: #d81536;
	--c-ink-900: #161618;
	--c-ink-850: #303238; /* desktop submenu text on the light panel */
	--c-ink-800: #1f2030;
	--c-ink-700: #313241;
	--c-ink-500: #5b6b82;
	--c-ink-300: #8c98ad;
	--c-ink-100: #d5dce8;
	--c-ink-50: #f1f3f7;
	--c-gray-50: #f7f7f8;  /* desktop submenu panel surface */
	--c-gray-200: #e5e5e8; /* desktop submenu hairline border */
	--c-white: #ffffff;
	--c-green-600: #2f7d0a;

	/* ------------------------------------------------------------------ */
	/* Color - semantic (components consume only these)                    */
	/* ------------------------------------------------------------------ */
	--text-primary: var(--c-ink-700);
	--text-secondary: var(--c-ink-500);
	--text-muted: var(--c-ink-300); /* dark backgrounds only */
	--text-on-brand: var(--c-white); /* on --c-red-600 only */
	--bg: var(--c-white);
	--bg-muted: var(--c-ink-50);
	--bg-invert: var(--c-ink-900);
	--border: #e1e7f2;
	--link: var(--c-ink-500);
	--link-hover: var(--c-red-500);
	--focus-ring: var(--c-red-500);
	--status-success: var(--c-green-600);
	--status-danger: var(--c-red-500);

	/* Desktop navigation submenu (light full-bleed panel under the dark bar). */
	--submenu-bg: var(--c-gray-50);
	--submenu-text: var(--c-ink-850);
	--submenu-border: var(--c-gray-200);
	--submenu-hover: var(--c-red-600);

	/* Sticker palette - legacy car-card sticker colors (see car-card.css). */
	--sticker-testdrive: #f09018; /* Тест-драйв - orange */
	--sticker-action: #204098;    /* Акція - blue */
	--sticker-check: #d81838;     /* AELITA CHECK - red */

	/* ------------------------------------------------------------------ */
	/* Typography                                                          */
	/* ------------------------------------------------------------------ */
	--font-body: "MyriadSetProText", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: "MyriadSetProSemibold", "MyriadSetProText", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display-strong: "MyriadSetProBold", "MyriadSetProSemibold", "MyriadSetProText", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* px, not rem: Bootstrap 3 sets html{font-size:10px}, so every rem would
	 * resolve to 10px and make design-system text tiny. */
	--fs-display: clamp(32px, 5vw, 40px);
	--fs-h2: 28px;
	--fs-h3: 24px;
	--fs-h4: 18px;
	--fs-body: 16px;
	--fs-small: 14px;
	--fs-caption: 12px;

	--lh-display: 1.1;
	--lh-heading: 1.2;
	--lh-body: 1.6;

	--measure: 66ch;

	/* ------------------------------------------------------------------ */
	/* Space and layout                                                    */
	/* ------------------------------------------------------------------ */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	--container: 1200px;
	--container-wide: 1400px;
	--grid-gutter: 24px;
	/* Maximum width of the mobile navigation drawer. */
	--drawer-width: 420px;

	/* ------------------------------------------------------------------ */
	/* Shape                                                               */
	/* ------------------------------------------------------------------ */
	--radius: 0;
	--border-w: 1px;
	--border-c: var(--border);
	--shadow-overlay: 0 10px 30px rgba(22, 22, 24, 0.12);
	/* Light separation for the submenu panel (no heavy elevation). */
	--shadow-submenu: 0 8px 20px rgba(22, 22, 24, 0.06);

	/* ------------------------------------------------------------------ */
	/* Z-index                                                             */
	/* Layered above the legacy theme, whose highest legacy z-index is    */
	/* 1113 (main.css .dropdown-menu) / 1111 (media.css navbar-collapse)  */
	/* and whose catalog filter reaches 1001-1110. The header (and its    */
	/* dropdowns) and the drawer/overlay must all sit above that whole     */
	/* band so no page content paints over them.                          */
	/* ------------------------------------------------------------------ */
	--z-base: 0;
	--z-sticky: 100;
	/* Header and its dropdowns must clear legacy content (filters 1001-1110). */
	--z-header: 1150;
	--z-dropdown: 1200;
	--z-overlay: 1300;
	--z-modal: 1400;
	--z-toast: 1500;
	--z-preloader: 1600;

	/* ------------------------------------------------------------------ */
	/* Motion                                                              */
	/* ------------------------------------------------------------------ */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	/* Desktop submenu reveal: a gentle, slightly long settle. */
	--ease-nav: cubic-bezier(0.22, 1, 0.36, 1);

	--dur-press: 160ms;
	--dur-popover: 180ms;
	--dur-dropdown: 200ms;
	--dur-nav: 240ms;
	--dur-modal: 250ms;
	--dur-overlay: 300ms;

	/* ------------------------------------------------------------------ */
	/* Breakpoints - reference values only                                 */
	/* CSS custom properties cannot be used inside @media natively; these  */
	/* exist for documentation and parity with DESIGN.md. Media queries    */
	/* must hard-code the same values.                                     */
	/* ------------------------------------------------------------------ */
	--bp-sm: 480px;
	--bp-md: 768px;
	--bp-lg: 992px;
	--bp-xl: 1200px;
	--bp-2xl: 1400px;
}