/*
 * Trellis design tokens — the single source of truth for colour, type,
 * spacing and radius. Mirrors 01-صفحه-اصلی/design-system.html from the UI kit.
 *
 * The values here are بناگرد's navy + amber. The three --brand-* vars are
 * also written into :root at runtime from config/vertical.php, and a site
 * whose colours differ gets the navy scale, the accent family and body text
 * re-derived from them too (inc/brand-palette.php). Neutrals, status colours,
 * type and spacing are fixed by this file.
 */

:root {
	color-scheme: light;

	/* ---- Brand (overridable from config) ---- */
	--brand-primary: #0B1626;   /* navy 900 */
	--brand-primary-deep: #08111F;
	--brand-accent: #F2A007;    /* amber — the primary action colour */

	/* ---- Navy scale ---- */
	--navy-900: #0B1626;
	--navy-800: #10203A;   /* body text */
	--navy-700: #17304F;   /* secondary button, links */
	--navy-600: #16283F;   /* card on dark */
	--navy-500: #33415A;   /* nav text */

	/* ---- Brand mark ----
	 * The logo tile and the glyph drawn on it (inc/template-tags.php's
	 * trellis_brand()). Two variables rather than fixed fills so the footer,
	 * which sits on a dark ground, can re-colour the mark by redefining the
	 * pair instead of reaching inside the SVG. */
	--brand-mark-bg: var(--brand-accent, #F2A007);
	--brand-mark-ink: var(--on-accent, var(--brand-primary, #0B1626));

	/* ---- Accent + status ---- */
	--accent: #F2A007;
	--accent-ink: #8A4F00; /* text on a light amber ground */
	--accent-soft: #FDF1DA;
	--accent-soft-border: #F3D9A6;
	/* Rating stars, score bars and the verdict pill: always gold, whatever the
	 * brand accent is (a red accent made stars read as errors). Not part of the
	 * brand palette, so inc/brand-palette.php never re-derives these. */
	--rating: #F2A007;
	--rating-ink: #8A4F00;
	--rating-soft: #FDF1DA;
	--rating-soft-border: #F3D9A6;
	--verified: #0E7A5C;
	--verified-soft: #E7F4EF;
	--verified-soft-border: #B8DFD1;
	--alert: #B4402F;
	--alert-soft: #FBE9E6;
	--alert-soft-border: #F1C7C0;
	/* Amber: an action that partly succeeded — neither a failure nor a clean save. */
	--warn: #8A5A00;
	--warn-soft: #FDF3E0;
	--warn-soft-border: #EED8AC;

	/* ---- Neutrals ---- */
	--text: #10203A;
	--text-soft: #33415A;
	--muted: #5C6B80;      /* steel — secondary text */
	--icon: #8A97A8;
	--line: #E3E8EF;
	--line-strong: #C9D3E0; /* input border */
	--fill: #EEF2F7;       /* chip / icon tile */
	--surface: #F5F7FA;    /* page ground */
	--surface-2: #E4EAF1;  /* map / grid placeholder */
	--placeholder: #DCE3EC;/* image placeholder */
	--white: #FFFFFF;

	/* ---- Dark-section text ---- */
	--on-dark: #FFFFFF;
	--on-dark-muted: #A6B6CA;
	--on-dark-faint: #8FA3BC;
	--on-dark-line: rgba(255,255,255,0.10);

	/* ---- Typography ---- */
	--font: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
	--font-latin: "Archivo", var(--font);
	--fs-h1: 42px;
	--fs-h2: 26px;
	--fs-h3: 17px;
	--fs-body: 16px;
	--fs-meta: 13px;
	--fs-sm: 14px;
	--lh: 1.7;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;

	/* ---- Media ----
	 * One photo shape for the whole site: blog cards, listing cards, the
	 * listing gallery, portfolio tiles, dashboard thumbs and article heroes
	 * all crop to this. It matches the trellis-card / trellis-hero crops
	 * registered in inc/setup.php, so the box and the file agree. Circular
	 * avatars and the YouTube frame are the only shapes that opt out. */
	--ratio-media: 3 / 2;

	/* ---- Radius ---- */
	--r-card: 8px;
	--r-control: 6px;   /* button, field */
	--r-chip: 4px;      /* badge, chip */

	/* ---- Spacing / layout ---- */
	--container: 1200px;
	--gutter: 24px;
	--tap: 44px;        /* minimum touch target */
	--section-y: 56px;
	/* Height of the sticky site header. base.css turns it into the bar's own
	   height, the offset the narrow-screen search strip hangs from, and html's
	   scroll-padding, so in-page anchors don't land underneath the bar. */
	--header-h: 76px;

	/* ---- Elevation ---- */
	--shadow-card: 0 10px 26px color-mix(in srgb, var(--navy-800) 7%, transparent);
	--shadow-pop: 0 18px 44px rgba(3, 10, 20, 0.38);
}

@media (max-width: 900px) {
	:root {
		--fs-h1: 30px;
		--fs-h2: 22px;
		--gutter: 16px;
		--section-y: 40px;
	}
}

/* Same breakpoint the header itself switches shape at (base.css). */
@media (max-width: 760px) {
	:root { --header-h: 64px; }
}