/*
 * vgs-design — tokens.css (handle «vgs-tokens», on :root). The one source of design tokens for the
 * whole site and app (ADR-047); approved design: vgstore-system/docs/design/1405-07-05/.
 *
 * - Components read SEMANTIC tokens only — never the --vgs-p-* primitives, never raw hex.
 * - Every name vgs-auth/assets/tokens.css had keeps its name. Two values changed on purpose:
 *     --vgs-primary-soft  rgba(5,62,255,.10) → #EEF4FF (opaque; same on white, no murk on canvas)
 *     --vgs-line-strong   (new)  #838D9F   (control borders ≥3:1 on white, canvas and field)
 * - Weights 400 / 700 / 900 only (the child theme's IRANYekanX Regular / Bold / Black files).
 * - Not here on purpose: --vgapp-nav-h / --vgapp-top-h belong to vgapp, which sets them only while
 *   its bars are visible (ADR-046); defining them on :root would out-rank vgapp's html{} rule and
 *   pad every desktop page. The dark block of the design file is structure only and is not shipped.
 */

:root {
	/* ── Primitives (do not use in components) ───────────────────────── */
	--vgs-p-blue-50: #eef4ff;
	--vgs-p-blue-100: #dce7ff;
	--vgs-p-blue-600: #053eff; /* brand — owner decision */
	--vgs-p-blue-700: #0334d9;
	--vgs-p-blue-800: #022ab0;
	--vgs-p-gray-0: #ffffff;
	--vgs-p-gray-25: #f6f8fc;
	--vgs-p-gray-50: #f4f6fa;
	--vgs-p-gray-75: #eef0f5;
	--vgs-p-gray-100: #e5e8f0;
	--vgs-p-gray-400: #838d9f;
	--vgs-p-gray-500: #687182;
	--vgs-p-gray-700: #3d4759;
	--vgs-p-gray-900: #10182b;
	--vgs-p-green-50: #e7f6ec;
	--vgs-p-green-500: #16a34a;
	--vgs-p-green-800: #14663a;
	--vgs-p-amber-50: #fff4e5;
	--vgs-p-amber-800: #90570a;
	--vgs-p-red-50: #fdecec;
	--vgs-p-red-500: #dc2626;
	--vgs-p-red-800: #a3231f;

	/* ── Brand / action ───────────────────────────────────────────────── */
	--vgs-primary: var(--vgs-p-blue-600);        /* fills; white on it 6.69 */
	--vgs-primary-hover: var(--vgs-p-blue-700);  /* 8.41 */
	--vgs-primary-press: var(--vgs-p-blue-800);  /* 10.71 */
	--vgs-primary-ink: var(--vgs-p-blue-600);    /* blue text/icons: 6.69 on white, 6.29 on canvas */
	--vgs-primary-soft: var(--vgs-p-blue-50);    /* primary-ink on it 6.06 */
	--vgs-primary-soft-2: var(--vgs-p-blue-100); /* 5.39 */
	--vgs-on-primary: var(--vgs-p-gray-0);

	/* The one contrast block per page (home hero / app sell strip) */
	--vgs-brand-block: var(--vgs-p-blue-600);
	--vgs-on-brand: var(--vgs-p-gray-0);
	--vgs-on-brand-2: var(--vgs-p-blue-100);
	--vgs-on-brand-line: rgba(255, 255, 255, 0.64);

	/* ── Text ─────────────────────────────────────────────────────────── */
	--vgs-ink: var(--vgs-p-gray-900);            /* 16.6 on canvas */
	--vgs-ink-2: var(--vgs-p-gray-700);          /* the only text on plain-soft and primary-soft */
	--vgs-muted: var(--vgs-p-gray-500);          /* ONLY on white 4.91, canvas 4.62, field 4.54 */

	/* ── Lines ────────────────────────────────────────────────────────── */
	--vgs-line: var(--vgs-p-gray-100);           /* decorative */
	--vgs-line-strong: var(--vgs-p-gray-400);    /* control borders ≥3:1 */

	/* ── Surfaces ─────────────────────────────────────────────────────── */
	--vgs-bg: var(--vgs-p-gray-0);               /* legacy name = surface */
	--vgs-surface: var(--vgs-p-gray-0);
	--vgs-canvas: var(--vgs-p-gray-25);
	--vgs-field: var(--vgs-p-gray-50);
	--vgs-plain-soft: var(--vgs-p-gray-75);
	--vgs-scrim: rgba(16, 24, 43, 0.48);

	/* ── Status: blue act · green done · amber waiting · red error/cancel/<6h — never colour alone ── */
	--vgs-ok: var(--vgs-p-green-500);            /* icons, bars, dots — never text (3.30) */
	--vgs-ok-ink: var(--vgs-p-green-800);
	--vgs-ok-soft: var(--vgs-p-green-50);
	--vgs-warn-ink: var(--vgs-p-amber-800);
	--vgs-warn-soft: var(--vgs-p-amber-50);
	--vgs-danger: var(--vgs-p-red-500);          /* icons, error borders */
	--vgs-danger-ink: var(--vgs-p-red-800);
	--vgs-danger-soft: var(--vgs-p-red-50);
	--vgs-info-ink: var(--vgs-primary-ink);
	--vgs-info-soft: var(--vgs-primary-soft);

	/* ── Type ─────────────────────────────────────────────────────────── */
	--vgs-font: iranyekan, "IRANYekanX", Tahoma, sans-serif; /* family name as the child theme declares it */
	--vgs-fs-12: 12px; /* floor — nothing smaller */
	--vgs-fs-13: 13px;
	--vgs-fs-14: 14px;
	--vgs-fs-16: 16px; /* body, inputs (no iOS zoom) */
	--vgs-fs-18: 18px;
	--vgs-fs-22: 22px;
	--vgs-fs-28: 28px;
	--vgs-fs-hero: 36px;
	--vgs-lh-body: 1.8;
	--vgs-lh-label: 1.5;
	--vgs-lh-head: 1.4;
	--vgs-fw-body: 400;
	--vgs-fw-strong: 700;
	--vgs-fw-display: 900;

	/* ── Space (4-pt) ─────────────────────────────────────────────────── */
	--vgs-s1: 4px;
	--vgs-s2: 8px;
	--vgs-s3: 12px;
	--vgs-s4: 16px;
	--vgs-s5: 24px;
	--vgs-s6: 32px;
	--vgs-s7: 48px;
	--vgs-gap: 16px; /* legacy name = s4 */

	/* ── Shape ────────────────────────────────────────────────────────── */
	--vgs-r-sm: 8px;
	--vgs-r-md: 12px;
	--vgs-r-lg: 16px;
	--vgs-r-xl: 20px;
	--vgs-r-pill: 999px;
	--vgs-radius: 16px; /* legacy name = r-lg */

	/* ── Elevation: two levels ────────────────────────────────────────── */
	--vgs-elev-0: none;
	--vgs-shadow-float: 0 8px 24px -12px rgba(16, 24, 43, 0.22);
	--vgs-elev-1: var(--vgs-shadow-float);

	/* ── Motion ───────────────────────────────────────────────────────── */
	--vgs-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--vgs-dur-fast: 120ms;
	--vgs-dur: 180ms;
	--vgs-dur-slow: 240ms;

	/* ── Layout ───────────────────────────────────────────────────────── */
	--vgs-container: 1200px;
	--vgs-gutter: 16px;
	--vgs-aside-w: 280px;

	/* ── Controls ─────────────────────────────────────────────────────── */
	--vgs-tap: 44px;
	--vgs-control-h: 48px;
	--vgs-btn-lg: 52px;
	--vgs-btn-md: 44px;
	--vgs-btn-sm: 36px;
	--vgs-chip-h: 36px;
	--vgs-seg-h: 44px;
	--vgs-actionbar-h: 76px;
	--vgs-toast-h: 56px;
	--vgs-safe-b: env(safe-area-inset-bottom, 0px);
	--vgs-focus: 0 0 0 4px var(--vgs-primary-soft);

	/* ── Legacy aliases (read by current plugin CSS; not for new code) ── */
	--vgs-accent: var(--vgs-primary-ink); /* notifications.css / kyc.css fell back to #2563EB */
	--vgs-text-main: var(--vgs-ink);
	--vgs-text-muted: var(--vgs-muted);
}

@media (min-width: 850px) {
	:root {
		--vgs-gutter: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--vgs-dur-fast: 0ms;
		--vgs-dur: 0ms;
		--vgs-dur-slow: 0ms;
	}
}