/*
 * Design tokens — extracted from the AbzarCT Figma (node 0:1).
 * Colours, type scale, radii and shadows taken from real node values.
 */

:root {
	/* Brand + accents */
	--c-ink: #25272C;          /* primary text            */
	--c-red: #EB3F3F;          /* price, sale              */
	--c-red-cta: #EB5757;      /* CTA buttons (cart, PDP +) */
	--c-red-ink: #C33E40;      /* pressed / darker red     */
	--c-teal: #14B8A6;         /* confirm, active tab      */
	--c-teal-600: #0D9488;
	--c-teal-100: #CCFBF1;
	--c-blue: #007AFF;         /* track order, support, links */
	--c-indigo: #6366F1;       /* cheque buy, radio select */
	--c-indigo-600: #4649E5;
	--c-indigo-50: #EEEEFF;

	/* Neutrals */
	--c-gray-900: #25272C;
	--c-gray-700: #40444C;
	--c-gray-600: #5B616E;
	--c-gray-500: #757575;
	--c-gray-400: #8E95A2;
	--c-gray-300: #B6BAC3;
	--c-line: #D8DBDF;
	--c-bg: #F9FAFB;
	--c-surface: #FFFFFF;

	/* Semantic aliases */
	--c-text: var(--c-ink);
	--c-text-muted: var(--c-gray-500);
	--c-text-dim: var(--c-gray-400);
	--c-price: var(--c-red);
	--c-discount-bg: var(--c-teal);

	/* Type scale (px matches Figma) */
	--fs-10: 0.625rem;
	--fs-11: 0.6875rem;
	--fs-12: 0.75rem;
	--fs-13: 0.8125rem;
	--fs-14: 0.875rem;
	--fs-16: 1rem;
	--fs-18: 1.125rem;
	--fs-22: 1.375rem;
	--fs-28: 1.75rem;

	/* Weights (Abar variable font) */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-heavy: 900;

	/* Radii */
	--r-sm: 3px;
	--r: 6px;              /* default: cards, buttons */
	--r-lg: 12px;
	--r-pill: 100px;

	/* Shadows — very soft, matching the flat design */
	--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
	--shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	--shadow-teal: 0 4px 20px rgba(20, 184, 166, 0.08);
	/* The home header sits noticeably heavier than a card. Measured off the
	   1:2 render (12/255 darker than the page at the bar's edge, fading over
	   ~21px) because the API was rate-limited when this was matched. */
	--shadow-header: 0 4px 20px rgba(0, 0, 0, 0.11);

	/* Layout */
	--app-max: 500px;     /* mobile frame width on desktop */
	--pad: 16px;

	/*
	 * Vertical rhythm between home sections. The Figma frames carry no padding
	 * on the sections themselves — the breathing room is the gap BETWEEN
	 * containers, measured off the 2026-08-05 export at 64–114px (median ~78).
	 * Two neighbouring sections each contribute --sec-y, so 38 ≈ 76 between
	 * them. The theme used to use 14 (28 total), which is what the designer
	 * meant by «خیلی چفت شدن به هم».
	 */
	--sec-y: 38px;
	--tabbar-h: 80px;
	--header-h: 82px;
}