/**
 * Design tokens, transcribed from the Obsidian vault:
 *   Obsidian/Visual Identity/03 Color Tokens.md
 *   Obsidian/Visual Identity/04 Typography RTL.md
 *   Obsidian/Visual Identity/05 Website Experience.md
 *   Obsidian/Visual Identity/07 Components and UI Rules.md
 * Change values there first, then mirror the change here — this file has no other source of truth.
 */

:root {
	/* ---- primitives: color scales ---- */
	--primary-50: #edf5f7;
	--primary-100: #d8e9ed;
	--primary-200: #b2d2da;
	--primary-300: #83b3c1;
	--primary-400: #4e8ea3;
	--primary-500: #2e7188;
	--primary-600: #1e5c72;
	--primary-700: #164b60;
	--primary-800: #123d4f;
	--primary-900: #0d2f3d;

	--secondary-50: #f3f7f4;
	--secondary-100: #e4eee7;
	--secondary-200: #ccdccf;
	--secondary-300: #adc5b3;
	--secondary-400: #789a83; /* shapes/charts/light surfaces only — not for direct text */
	--secondary-500: #557a66; /* the only Secondary tone approved for white text */
	--secondary-600: #4b6d5a;
	--secondary-700: #3e5c4a;
	--secondary-800: #324b3c;
	--secondary-900: #273b2f;

	--accent-50: #fcf3f2;
	--accent-100: #f8e4e1;
	--accent-200: #f0c8c3;
	--accent-300: #e1a098;
	--accent-400: #d08076;
	--accent-500: #b35b52;
	--accent-600: #9e4e47;
	--accent-700: #843f3a;
	--accent-800: #6d3532;
	--accent-900: #582c2a;

	--neutral-dark: #142e37;
	--neutral-medium: #435b63;
	--neutral-light: #dce5e5;
	--canvas: #fafcfb;
	--surface-blue: #f0f6f7;
	--surface-green: #edf4ef;
	--surface-accent: #fcf3f2;

	--success: #2f6f45;
	--warning: #8a5200;
	--error: #a13e3e;
	--info: #1c607a;

	/* ---- semantic: what templates should actually reference ---- */
	--color-bg: var(--canvas);
	--color-surface: #ffffff;
	--color-surface-info: var(--surface-blue);
	--color-surface-learn: var(--surface-green);
	--color-surface-feeling: var(--surface-accent);
	--color-heading: var(--neutral-dark);
	--color-text: var(--neutral-medium);
	/* Small accent text — eyebrows, kickers, category labels. `--secondary-500` is the brand green,
	   but measured against this project's own tinted surfaces it lands at 4.41:1 on --surface-blue
	   and 4.31:1 on --surface-green, both under AA's 4.5 for text this size. One step darker clears
	   it everywhere (5.17–5.78) and is indistinguishable as a brand colour. The palette entry itself
	   is unchanged: it is still correct for borders, icons and fills, which have no such threshold. */
	--color-text-accent: var(--secondary-600);
	--color-border: var(--neutral-light);
	--color-cta-primary-bg: var(--primary-700);
	--color-cta-primary-text: #ffffff;
	--color-cta-secondary-text: var(--primary-700);
	--color-cta-growth-bg: var(--secondary-500);
	--color-cta-growth-text: #ffffff;
	--color-link: var(--primary-700);
	--color-focus-ring: rgb(from var(--primary-500) r g b / 0.45);
	--color-success: var(--success);
	--color-warning: var(--warning);
	--color-error: var(--error);
	--color-info: var(--info);

	/* ---- type: families ---- */
	--font-display: "Ravagh", "Pinar DS4", "Vazirmatn", Tahoma, sans-serif; /* TEST: Ravagh in place of Pinar, see fonts.css */ /* headlines, cover titles, short quotes — never long text, tables or forms */
	--font-body: "IRANSans X", "Vazirmatn", Tahoma, sans-serif; /* nav, form, table, caption, long text, buttons */

	/* Two lessons the ladder below is built on (decisions.md 2026-09-12): leading is a unitless
	   ratio, because a length on `body` once gave every small element a flat 30px line; and sizes are
	   integers, because 165 hand-typed half-pixel declarations once gave the homepage 22 tiers. 12px
	   is the floor for any rendered text. */
	/* ---- type: THE LADDER (2026-09-27, decisions.md «One type ladder, one face rule, one spacing
	   scale, one container») — the only sizes a stylesheet may write. Each rung is a `font`
	   shorthand, `--text-X`, so a rule reads `font: var(--text-h2)`; its parts are `-size`, `-lh` and
	   `-weight` for the rules that need one. Leading is always a unitless ratio.

	   Responsive rungs run linearly from their 390px size to their 1280px size and stop there — the
	   slope is (max − min) / 890px, so both ends land on an integer and nothing in between is a
	   third breakpoint size. Pinar is on the five heading rungs and nowhere else: every number,
	   price, name, label, button and paragraph is IRANSans. */
	--text-display-size: clamp(30px, 25.618px + 1.1236vw, 40px);  --text-display-lh: 1.45; --text-display-weight: 760;
	--text-h1-size:      clamp(24px, 21.371px + 0.6742vw, 30px);   --text-h1-lh: 1.45;      --text-h1-weight: 760;
	--text-h2-size:      clamp(21px, 19.685px + 0.3371vw, 24px);   --text-h2-lh: 1.5;       --text-h2-weight: 700;
	--text-h3-size:      clamp(18px, 17.562px + 0.1124vw, 19px);   --text-h3-lh: 1.55;      --text-h3-weight: 700;
	--text-h4-size:      clamp(16px, 15.562px + 0.1124vw, 17px);   --text-h4-lh: 1.55;      --text-h4-weight: 700;
	--text-subtitle-size: clamp(16px, 15.562px + 0.1124vw, 17px);  --text-subtitle-lh: 1.8; --text-subtitle-weight: 500;
	--text-body-size: 16px;    --text-body-lh: 1.9;    --text-body-weight: 400;
	--text-body-s-size: 15px;  --text-body-s-lh: 1.9;  --text-body-s-weight: 400;
	--text-caption-size: 13px; --text-caption-lh: 1.7; --text-caption-weight: 400;
	--text-micro-size: 12px;   --text-micro-lh: 1.6;   --text-micro-weight: 500;
	--text-button-size: 14px;  --text-button-lh: 1;    --text-button-weight: 600;
	--text-button-s-size: 13px; --text-button-s-lh: 1; --text-button-s-weight: 600;
	--text-eyebrow-size: 13px; --text-eyebrow-lh: 1.6; --text-eyebrow-weight: 600;
	/* Numbers — prices, sums, stats, dates, counters. IRANSans 700 at 1.2, three sizes. The middle
	   one is 19, not the 20 the program first proposed: 20 is not on the ladder. Pair with
	   `font-variant-numeric: tabular-nums` where digits sit in a column. */
	--text-number-s-size: 16px; --text-number-m-size: 19px; --text-number-l-size: 24px;
	--text-number-lh: 1.2; --text-number-weight: 700;

	--text-display:  var(--text-display-weight) var(--text-display-size)/var(--text-display-lh) var(--font-display);
	--text-h1:       var(--text-h1-weight) var(--text-h1-size)/var(--text-h1-lh) var(--font-display);
	--text-h2:       var(--text-h2-weight) var(--text-h2-size)/var(--text-h2-lh) var(--font-display);
	--text-h3:       var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-lh) var(--font-display);
	--text-h4:       var(--text-h4-weight) var(--text-h4-size)/var(--text-h4-lh) var(--font-display);
	--text-subtitle: var(--text-subtitle-weight) var(--text-subtitle-size)/var(--text-subtitle-lh) var(--font-body);
	--text-body:     var(--text-body-weight) var(--text-body-size)/var(--text-body-lh) var(--font-body);
	--text-body-s:   var(--text-body-s-weight) var(--text-body-s-size)/var(--text-body-s-lh) var(--font-body);
	--text-caption:  var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-lh) var(--font-body);
	--text-micro:    var(--text-micro-weight) var(--text-micro-size)/var(--text-micro-lh) var(--font-body);
	--text-button:   var(--text-button-weight) var(--text-button-size)/var(--text-button-lh) var(--font-body);
	--text-button-s: var(--text-button-s-weight) var(--text-button-s-size)/var(--text-button-s-lh) var(--font-body);
	--text-eyebrow:  var(--text-eyebrow-weight) var(--text-eyebrow-size)/var(--text-eyebrow-lh) var(--font-body);
	--text-number-s: var(--text-number-weight) var(--text-number-s-size)/var(--text-number-lh) var(--font-body);
	--text-number-m: var(--text-number-weight) var(--text-number-m-size)/var(--text-number-lh) var(--font-body);
	--text-number-l: var(--text-number-weight) var(--text-number-l-size)/var(--text-number-lh) var(--font-body);

	/* Retired names, kept only until the sheet that still reads each one is migrated (runs 1–9 of
	   docs/type-and-space-prompt.md); each points at the rung that replaces it. Delete this block
	   when `grep -r "text-h5\|text-h6\|text-body-l\|text-h[1-6]-font" assets/css` is empty. */
	--text-h5-size: var(--text-h3-size); --text-h5-weight: var(--text-h3-weight); --text-h5-lh: var(--text-h3-lh);
	--text-h6-size: var(--text-h4-size); --text-h6-weight: var(--text-h4-weight); --text-h6-lh: var(--text-h4-lh);
	--text-body-l-size: var(--text-subtitle-size); --text-body-l-lh: var(--text-subtitle-lh);

	/* ---- space: 8pt grid — see 05 Website Experience.md. --space-0 (2026-09-29) is the one half
	   step, for an icon beside its label and a title beside its meta line. ---- */
	--space-0: 4px;
	--space-1: 8px;
	--space-2: 12px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;
	--space-8: 96px;

	/* ---- space BETWEEN things (2026-09-27). The 8pt steps above size a component's own padding;
	   these five are the only values for the distance between a page's parts. ---- */
	--space-band: clamp(56px, 7vw, 88px);    /* a full-width band's padding; the homepage section gap */
	--space-section: clamp(48px, 6vw, 64px); /* between sections inside one column */
	--space-block: clamp(24px, 3vw, 32px);   /* between blocks inside a section */
	--space-head: 16px;                      /* a heading to its content; the crumb row to the page head */
	--space-stack: 12px;                     /* lines inside a card or row */

	/* ---- space INSIDE a component (2026-09-29): the spacing standard. A stylesheet writes one of
	   these roles, or a --space-N step; never a literal. See design-system.md "The spacing standard". ---- */
	--pad-card: clamp(16px, 12.494px + 0.8989vw, 24px); /* a card's or panel's own padding */
	--pad-row: var(--space-3);       /* a list row, a table row, a compact card */
	--pad-chip-y: var(--space-0);    /* chips, pills, tags */
	--pad-chip-x: var(--space-2);
	--gap-grid: clamp(16px, 12.494px + 0.8989vw, 24px); /* between cards in a grid or rail */
	--gap-list: var(--space-2);      /* between rows in a list */
	--gap-inline: var(--space-1);    /* icon to label, chip to chip, button to button */
	--gap-field: var(--space-1);     /* a label to its control, a control to its help or error */
	--gap-form: var(--space-4);      /* between fields in a form */
	--gap-title: var(--space-0);     /* a title to the meta or sentence directly under it */

	/* ---- icon glyph sizes (2026-09-29): an icon's font-size is one of these, never a literal ---- */
	--icon-xs: 12px; /* inside a chip, a crumb or a meta line */
	--icon-s: 14px;  /* beside caption text, in a status pill */
	--icon-m: 18px;  /* beside body text, in a button or field */
	--icon-l: 22px;  /* a list tile, a control on its own */
	--icon-xl: 26px; /* a feature tile, a step node, a titled notice */

	/* ---- radius — see 05 Website Experience.md / 07 Components and UI Rules.md ---- */
	--radius-input: 10px; /* inputs and buttons */
	--radius-card: 16px;
	--radius-hero: 24px; /* flagship sections only */
	--radius-pill: 999px; /* filters and small labels only — not general buttons */

	/* ---- component baselines — see 07 Components and UI Rules.md ---- */
	--control-min-height: 48px;
	--icon-stroke: 1.75px; /* 1.75–2px outline icons, 24px default size */
	--shadow-card: 0 1px 2px rgb(from var(--primary-700) r g b / 0.06), 0 4px 16px rgb(from var(--primary-700) r g b / 0.06);
}

*, *::before, *::after {
	box-sizing: border-box;
}

/*
 * The `hidden` attribute has to actually hide.
 *
 * The browser's own `[hidden] { display: none }` is a low-specificity UA rule, so any component
 * class that sets `display` silently beats it — and this codebase hides things with `el.hidden =
 * true` in five separate scripts. That had already produced a live defect: the booking wizard's
 * hold bar carries `hidden` in the markup but `.booking-hold` sets `display: flex`, so step 4
 * showed «این زمان برای شما نگه داشته شده است:» above an empty countdown before any slot was held.
 *
 * One safety net rather than a patch per component — the same call, for the same reason, as the
 * `.primary`/`.secondary` underline rule (decisions.md, 2026-08-29). The nine per-selector
 * `[hidden] { display: none }` rules already scattered through account.css and auth.css all agree
 * with this; they are now redundant rather than contradicted.
 */
[hidden] {
	display: none !important;
}

/* RTL is the default writing mode for this site; see 04 Typography RTL.md. */
html {
	direction: rtl;
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font: var(--text-body);
}

/* Every heading starts on its rung. This replaces `h1…h6 { line-height: 1.3 }`, which overrode the
   leading of any heading that set a size and none, and left prose headings (legal pages, an article
   body) on the UA's em sizes. Element selectors, so any component rule wins; h5 and h6 have no rung
   of their own and take h4's. */
h1, h2, h3, h4, h5, h6 { color: var(--color-heading); }
h1 { font: var(--text-h1); }
h2 { font: var(--text-h2); }
h3 { font: var(--text-h3); }
h4, h5, h6 { font: var(--text-h4); }

/*
 * `small` had no rule anywhere in this theme, so it fell through to the UA's own `0.8333em` — a
 * relative unit, which is the one thing this scale cannot have: it compounds against whatever it
 * happens to sit in, so the same element renders a different size in every context. In one live
 * place it compounded straight through the floor — the «(اختیاری)» qualifier inside an `.iz-field`
 * label renders 0.8333 × the label's 14px = 11.67px, on the booking form and on both selects of
 * the ticket-create form.
 *
 * A census of every `small` on the site found exactly that one relying on the UA value; the other
 * nine situations are sized by a rule of their own (`.iz-h2 small`, `.iz-date small`,
 * `.offer-card__date small` …), all of which out-specify this and keep their own size. So this
 * catches only the ones nobody styled, and the caption token is the right answer for them.
 */
small {
	font-size: var(--text-caption-size);
}

/* Technical/LTR content — color codes, numerals in code, etc. — per 04 Typography RTL.md. */
.ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Standard hidden-until-focused pattern for skip links and similar a11y-only text. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ---------------------------------------------------------------------------------------------
   Site chrome — header and footer.

   Here rather than in content.css because both render on every page, and because the header
   previously carried its own inline `style=""`, which content.css then had to beat with
   `!important` to change one padding on mobile.

   Below 1024px the primary nav now gives way to the «منو» side panel (chrome.css, 2026-09-10).
   It used to be `display: none` below 768px with nothing to replace it, then a scrolling row under
   the bar; the panel is a native popover, so it still opens without JavaScript and every link in it
   is reachable with the keyboard. The panel, the header CTA and the footer are styled in chrome.css.
   --------------------------------------------------------------------------------------------- */
/* The width the site header lines up with: the page container of whatever is below it. Pages whose
   container is not the common one override this on `body` from their own stylesheet. */
:root { --chrome-width: min(1200px, calc(100% - 64px)); }

/* The header bar, its nav and its buttons moved to chrome.css with the v3 chrome (2026-09-27). */

@media (max-width: 767px) {
	/* Most page containers collapse to a 32px gutter here; the few that do not move this again from
	   their own stylesheet. */
	:root { --chrome-width: calc(100% - 32px); }
}

/* ---------------------------------------------------------------------------------------------
   Reduced motion, for the whole theme.

   The theme had six of these, each naming one thing — two skeletons, the panel drawer, the booking
   step, a placeholder line. Every one is correct, and between them they still missed
   `content.css`'s seven transform transitions (the card lift, both disclosure chevrons, the audio
   play button, the two buy buttons) and the assessment progress bar in `tests.css`. That is how a
   per-rule opt-out fails: it has to be remembered again at each new transition, and it was not.

   So the rule is here instead, in the stylesheet that loads on every page, and it is deliberately
   broad. `!important` because it has to beat rules that are more specific than it by design, and
   `0.01ms` rather than `none` so that anything listening for `transitionend` or `animationend`
   still gets its event — nothing in this theme does today, but a rule that silently breaks such a
   listener later is a bad trade for two characters.

   `scroll-behavior` is here for completeness; the smooth scrolls this theme actually performs are
   in JavaScript, and `assets/js/motion.js` is their equivalent of this block. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		/* Staggered entrances wait on a delay; without this they still pop in one by one. */
		animation-delay: 0s !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}