/*
 * Damavand Storefront — design tokens + the two layout utilities the catalog templates use.
 * RC2 (Task 60): copied verbatim from damavand-child/assets/css/rtl-foundation.css (sections 1, 4
 * and the breakpoint token overrides of 5) so the Selector/catalog templates render identically
 * when NO child theme is active (Mode B: Blocksy only). In Mode A the child loads the same tokens
 * first; the duplicate declarations are identical, so nothing changes there.
 */

:root {
	/* --- Spacing scale (4px base unit) ------------------------------- */
	--dv-space-1: 0.25rem;  /* 4px  */
	--dv-space-2: 0.5rem;   /* 8px  */
	--dv-space-3: 0.75rem;  /* 12px */
	--dv-space-4: 1rem;     /* 16px */
	--dv-space-5: 1.5rem;   /* 24px */
	--dv-space-6: 2rem;     /* 32px */
	--dv-space-7: 3rem;     /* 48px */
	--dv-space-8: 4rem;     /* 64px */
	--dv-space-9: 6rem;     /* 96px */

	/* --- Type scale (mobile-first; base font-size = 16px/1rem) -------
	   Scale ratio ~1.2 (minor third), rounded to clean rem values.
	   Headings get a second, larger set of values from the md
	   breakpoint up — see section 3. */
	--dv-font-size-xs:   0.75rem;   /* 12px — captions, badges     */
	--dv-font-size-sm:   0.875rem;  /* 14px — secondary text       */
	--dv-font-size-base: 1rem;      /* 16px — body                 */
	--dv-font-size-md:   1.125rem;  /* 18px — lead paragraph       */
	--dv-font-size-lg:   1.375rem;  /* 22px — h4                   */
	--dv-font-size-xl:   1.75rem;   /* 28px — h3                   */
	--dv-font-size-2xl:  2.125rem;  /* 34px — h2                   */
	--dv-font-size-3xl:  2.625rem;  /* 42px — h1                   */

	--dv-line-height-tight: 1.25;
	--dv-line-height-base:  1.7;   /* Persian text reads better with a
	                                   slightly looser line-height than
	                                   Latin body copy. */
	--dv-line-height-heading: 1.35;

	/* --- Font stack ----------------------------------------------------
	   Vazirmatn is a Persian-optimized, open-source (SIL OFL) variable
	   font. Its files are NOT bundled in this repo/sandbox (see the
	   @font-face block below and the doc for why + what to do). Tahoma
	   is used as the Windows-native RTL-safe fallback; the rest are
	   generic system-font fallbacks so text always renders legibly even
	   with zero custom fonts loaded. */
	--dv-font-family-base: "Vazirmatn", Tahoma, "Segoe UI", "Iranian Sans",
		system-ui, -apple-system, sans-serif;
	--dv-font-family-heading: var(--dv-font-family-base);

	/* --- Brand color system ----------------------------------------------
	   Founder decision, 2026-09-23, CORRECTED same day (see
	   docs/05-rtl-responsive-foundation.md §Brand colors for the full
	   correction note): the brand palette has an explicit priority order —
	     1. Primary   — Black/Graphite   — the DOMINANT color, the base of the
	                     whole UI and Damavand Steel's main visual identity.
	     2. Secondary — Steel/Silver     — industrial/steel feel, neutral surfaces.
	     3. Accent    — Warm Gold/Bronze — premium emphasis and small details
	                     ONLY, never the default/dominant color.
	     4. Supporting Accent — Red      — limited and targeted: specific CTAs,
	                     statuses, or emphasis only.
	     5. Orange — DO NOT USE, excluded from the palette entirely.
	   The Founder specified these as named categories, not exact hex values,
	   so the hex values below are this implementation's initial pick *within*
	   each approved category — not a separately-confirmed exact brand hex.
	   If the Founder later supplies exact hex codes, only this token block
	   needs to change; every rule in this file consumes a token, never a
	   literal color. These same hex values are mirrored into Elementor's
	   Global Colors by damavand-elementor-components.php (function
	   damavand_ec_brand_colors()) so the Design System and the Elementor
	   editor never drift apart — keep both in sync if either changes.
	   This is a DIFFERENT system from product colors (e.g. Silver, PVD Gold)
	   — see the "Product color reference" block further below; the two are
	   kept deliberately separate per the Founder's explicit instruction
	   (product color values are NOT brand-color statements). */
	--dv-color-primary: #1c1e20;        /* 1. Black/Graphite — DOMINANT, main visual identity */
	--dv-color-primary-alt: #33373b;    /* 1. Black/Graphite — secondary dark surface (footer, etc.) */
	--dv-color-secondary: #7d8790;      /* 2. Steel/Silver — industrial neutral, mid tone */
	--dv-color-secondary-light: #dde1e5;/* 2. Steel/Silver — light tint (borders, subtle bg) */
	--dv-color-accent: #a9802f;         /* 3. Warm Gold/Bronze — premium emphasis/detail ONLY */
	--dv-color-accent-deep: #7c5430;    /* 3. Warm Gold/Bronze — deeper variant (hover/active) */
	--dv-color-accent-supporting: #a3231c; /* 4. Red — LIMITED/targeted only; 5. never Orange */

	--dv-color-text: var(--dv-color-primary);
	--dv-color-text-muted: var(--dv-color-secondary);
	--dv-color-bg: #ffffff;
	--dv-color-bg-subtle: #f6f5f3;
	--dv-color-border: var(--dv-color-secondary-light);
	/* Links/interactive elements default to the DOMINANT primary color, per
	   the correction — gold is reserved for a premium hover/detail touch,
	   never the default interactive color. */
	--dv-color-link: var(--dv-color-primary);
	--dv-color-link-hover: var(--dv-color-accent);

	/* --- Product color reference (NOT part of the brand palette) -----------
	   Founder-confirmed real product colors — kept in a separate namespace on
	   purpose, for future use in product swatches/attribute displays (the
	   "color" field already present on some real catalog items — see
	   damavand-product-data). Never mixed with the --dv-color-* brand tokens
	   above; the Founder was explicit that these do not represent the brand
	   palette. */
	--dv-product-color-silver: #c7cbce;
	--dv-product-color-pvd-gold: #a9802f;

	/* --- Radii / misc ---------------------------------------------------- */
	--dv-radius-sm: 4px;
	--dv-radius-md: 8px;
	--dv-radius-lg: 16px;

	/* --- Layout ----------------------------------------------------------
	   Container max-widths per breakpoint; grown progressively so the
	   mobile-first base has no max-width constraint at all. */
	--dv-container-max: 100%;
	--dv-container-padding-inline: var(--dv-space-4);
}

.dv-container {
	width: 100%;
	max-width: var(--dv-container-max);
	margin-inline: auto;
	padding-inline: var(--dv-container-padding-inline);
}

/* Utility spacing helpers using logical properties (inline = start/end,
   which is right/left flipped automatically per direction). Kept small
   and generic on purpose — this is a foundation layer, not a full
   utility framework. */
.dv-stack > * + * {
	margin-block-start: var(--dv-space-4);
}

.dv-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- sm: ~480px — large phones ------------------------------------------ */
@media (min-width: 30em) { /* 480px */
	:root {
		--dv-container-padding-inline: var(--dv-space-5);
	}
}

/* --- md: ~768px — tablet -------------------------------------------------- */
@media (min-width: 48em) { /* 768px */
	:root {
		--dv-container-max: 720px;
		--dv-container-padding-inline: var(--dv-space-6);

		/* Slightly larger heading scale once there's room to breathe. */
		--dv-font-size-lg:  1.5rem;    /* 24px */
		--dv-font-size-xl:  2rem;      /* 32px */
		--dv-font-size-2xl: 2.5rem;    /* 40px */
		--dv-font-size-3xl: 3rem;      /* 48px */
	}
}

/* --- lg: ~1024px — small desktop ------------------------------------------ */
@media (min-width: 64em) { /* 1024px */
	:root {
		--dv-container-max: 960px;
	}
}

/* --- xl: ~1280px — wide desktop -------------------------------------------- */
@media (min-width: 80em) { /* 1280px */
	:root {
		--dv-container-max: 1200px;
	}
}