/* Astra-Opus 2 — generated from tokens.json */
:root, [data-theme="light"] {
  --bg: #ffffff; /* Page canvas. Light is pure white — never cream, ivory or a tinted neutral. Dark is #262626. */
  --surface: #ffffff; /* Cards, panels, table bodies, menus. In light it equals `bg`, so separate surfaces with a `line` hairline, never a tint; dark lifts to #303030. */
  --subtle: #f5f5f5; /* Secondary backgrounds: hover fill of quiet controls, table header band, search field fill, skeletons, raised dark panels (#383838). Neutral grey only. */
  --text: #292929; /* Primary text and icons on `bg`, `surface`, `subtle` and every status `-bg` (13.3:1 lowest in light, 10.0:1 lowest in dark). */
  --muted: #626262; /* Secondary text, metadata, helper text, placeholders, inactive tabs — on `bg`, `surface`, `subtle` (5.6:1 lowest light, 6.2:1 lowest dark). */
  --line: #e5e5e5; /* Hairlines: dividers, card, table and menu borders, progress track. Decorative (1.3–1.7:1): never the only edge of an interactive control — that is `control`. */
  --control: #858585; /* Boundaries of interactive controls: inputs, secondary buttons, checkbox and radio outlines, switch track off. At least 3:1 on `bg`, `surface`, `subtle` in both themes (3.18:1 lowest, dark `subtle`). */
  --action: #9c593d; /* Primary-action fill and filled selection (checked checkbox and radio, switch on) — at most one primary button per view. Line-style selection marks (tab and navigation underline, segmented edge, current page) use `action-border`. Label on it is `on-action`. In dark the fill alone is under 3:1 on `surface`/`subtle` (2.75/2.44), so a filled control always carries an `action-border` edge. Also the paint of `copper-fill` (alias). */
  --link: #955338; /* Inline links and text-level actions on `bg`, `surface`, `subtle` (5.4:1 lowest light, 5.1:1 lowest dark). Underline on hover and focus. Also the paint of `copper` (alias), which is never clickable on its own. */
  --success: #237251; /* Success text and icons on `success-bg` or any ground (5.1:1 light, 6.0:1 dark lowest). Always paired with a word or icon. */
  --success-bg: #e8f1eb; /* Fill behind `success` text in badges and alerts. `text` on it is 12.6:1 light, 10.4:1 dark. */
  --info: #356a84; /* Informational text and icons on `info-bg` or any ground (5.1:1 light, 6.0:1 dark lowest). Always paired with a word or icon. */
  --info-bg: #e8f0f4; /* Fill behind `info` text in badges and alerts. */
  --warning: #8b5d14; /* Warning and needs-review text and icons on `warning-bg` or any ground (4.9:1 light, 6.2:1 dark lowest). Always paired with a word or icon. */
  --warning-bg: #f5edd9; /* Fill behind `warning` text (the «نیازمند بررسی» badge). */
  --danger: #ae4947; /* Error and destructive text and icons on `danger-bg` or any ground (4.7:1 light, 5.5:1 dark lowest); the label and 1px edge of the destructive button. Always paired with a word or icon. */
  --danger-bg: #f8eae7; /* Fill behind `danger` text in badges and alerts; the hover and pressed fill of the destructive button. */
  --action-border: #9c593d; /* 1px edge of every `action` fill, and the focus-ring colour (through `focus`). In dark (#BA7C5F) it keeps the primary button's edge at 3.4:1 or more where the fill alone is not. */
  --progress-fill: #9c593d; /* Progress-bar fill on a `line` or `subtle` track (3.9:1 lowest, dark on `line`). */
  --on-action: #ffffff; /* Label and icons on an `action` fill: 5.37:1 light, 4.80:1 dark. Never on any other fill: those use `on-fill`. */
  --focus: var(--action-border); /* Keyboard focus ring — an alias of `action-border`. Drawn as a 2px solid outline 2px outside the control, so geometry never changes: 5.4:1 / 4.9:1 on light grounds, 4.4 / 3.9 / 3.4:1 on dark `bg` / `surface` / `subtle`. */
  --scrim: #00000052; /* Behind modal dialogs and drawers only: black at 32% (light) / 54% (dark). Neutral, never tinted. */
  --brand: #ae532d; /* THE logo / wordmark ink of every product (CHIDA, PersianSaze, Rasta, HR, Task manager, Accounting) on `bg`, `surface`, `subtle` in both themes (4.73:1 lowest light, 4.63:1 lowest dark), and on `copper-deep` through the band's dark-theme island (4.7:1). Never white, black, `text` or an inherited colour. Also: the 10px eyebrow square and up to four words of ONE display headline per page (expressive surfaces only). Never a button, link, icon or body text. */
  --copper: var(--link); /* Copper ink (alias of `link`): eyebrow text, key numerals, short expressive labels, and the glyph / swatch of the copper category (registry: materials & supply). Never clickable on its own (links use `link`), never body copy, never a status. */
  --copper-bg: #ffeadd; /* THE selection and highlight tint: selected table / list rows (full-row fill), the current item of a vertical nav or tool rail, the selected filter chip (with an `action-border` edge and a check), highlighted search hits. Also the copper category's tint (copper chip, tool tile, avatar, expressive tile) and the `EmptyState` icon tile. On it: `text`, `muted`, `link`, `copper` (4.5:1) and `control`, `action-border`, accent swatches (3:1). Never a page, section or resting-card background. */
  --copper-fill: var(--action); /* Solid copper tile (alias of `action`): copper icon squares, CHIDA / PersianSaze launcher tiles, the copper block of an illustration. Label and glyph are `on-fill`. Not a band: bands use `copper-deep`. */
  --copper-deep: #602505; /* Deep copper ground, the same paint in both themes: closing CTA band, the brand strip directly above a footer (the footer itself stays `bg` or `surface`), cover and film title / end cards, app-icon tile. At most one per screen height. The band is a dark-theme island (`data-theme="dark"` on the band), so inside it `brand` (logo), `text`, `muted`, `link` and `focus` take their dark values and pass on it; its one CTA is an inverse button (`on-fill` fill, `copper-deep` label). */
  --patina: #007678; /* Accent ink, verdigris, copper's own oxide (زنگاری). Text, glyph and swatch of the patina category (registry: people, services, MEP / installations; HR) on `bg`, `surface`, `subtle`, `patina-bg` (4.5:1) and `copper-bg` (3:1, swatch only). Identity only, never state; never a button, link, focus, input or alert colour. */
  --patina-bg: #e2f3f3; /* patina tint: category chip ground (a `patina` square plus a `text` label), tool / row tile, avatar, expressive feature tile. On it only `text`, `muted` and `patina` (4.5:1). Never behind body copy longer than a tile's one sentence, nor behind an alert, a badge or a table row. */
  --patina-fill: #007678; /* Solid patina (the same paint as light `patina`, in both themes): launcher / app tile, icon square of an expressive tile, materials-board block, illustration plane. Only `on-fill` sits on it. In product UI never larger than 44x44 except launcher tiles. */
  --indigo: #54639e; /* Accent ink, blueprint ink / blued steel (نیلی). Text, glyph and swatch of the indigo category (registry: drawings, design, documents, planning; Task manager) on `bg`, `surface`, `subtle`, `indigo-bg` (4.5:1) and `copper-bg` (3:1, swatch only). Identity only, never state; never a button, link, focus, input or alert colour. */
  --indigo-bg: #ebeffc; /* indigo tint: category chip ground (an `indigo` square plus a `text` label), tool / row tile, avatar, expressive feature tile. On it only `text`, `muted` and `indigo` (4.5:1). Never behind body copy longer than a tile's one sentence, nor behind an alert, a badge or a table row. */
  --indigo-fill: #54639e; /* Solid indigo (the same paint as light `indigo`, in both themes): launcher / app tile, icon square of an expressive tile, materials-board block, illustration plane. Only `on-fill` sits on it. In product UI never larger than 44x44 except launcher tiles. */
  --moss: #606f2a; /* Accent ink, olive, weathered stone, site ground (زیتونی). Text, glyph and swatch of the moss category (registry: site, execution, field, logistics; Rasta) on `bg`, `surface`, `subtle`, `moss-bg` (4.5:1) and `copper-bg` (3:1, swatch only). Identity only, never state; never a button, link, focus, input or alert colour. */
  --moss-bg: #edf1e4; /* moss tint: category chip ground (a `moss` square plus a `text` label), tool / row tile, avatar, expressive feature tile. On it only `text`, `muted` and `moss` (4.5:1). Never behind body copy longer than a tile's one sentence, nor behind an alert, a badge or a table row. */
  --moss-fill: #606f2a; /* Solid moss (the same paint as light `moss`, in both themes): launcher / app tile, icon square of an expressive tile, materials-board block, illustration plane. Only `on-fill` sits on it. In product UI never larger than 44x44 except launcher tiles. */
  --plum: #8d5074; /* Accent ink, porphyry (سنگ سماق), ceramics, ledgers (آلویی). Text, glyph and swatch of the plum category (registry: money: finance, contracts, invoices; Accounting) on `bg`, `surface`, `subtle`, `plum-bg` (4.5:1) and `copper-bg` (3:1, swatch only). Identity only, never state; never a button, link, focus, input or alert colour. */
  --plum-bg: #f9ebf2; /* plum tint: category chip ground (a `plum` square plus a `text` label), tool / row tile, avatar, expressive feature tile. On it only `text`, `muted` and `plum` (4.5:1). Never behind body copy longer than a tile's one sentence, nor behind an alert, a badge or a table row. */
  --plum-fill: #8d5074; /* Solid plum (the same paint as light `plum`, in both themes): launcher / app tile, icon square of an expressive tile, materials-board block, illustration plane. Only `on-fill` sits on it. In product UI never larger than 44x44 except launcher tiles. */
  --on-fill: #ffffff; /* Label and glyph on `copper-fill` and every accent `*-fill` (4.8:1 lowest), and the fill of the inverse CTA on `copper-deep`. Never a logo colour. */
  --series-a: #9c593d; /* Chart series A: copper, solid 2px, filled circle end marker; the primary measure / current entity, the only series with a direct label. At least 3:1 on `bg`, `surface`, `subtle` in both themes; always with a legend. */
  --series-b: #1f9a9c; /* Chart series B: patina, soft tier, dash 6 3, square marker. At least 3:1 on `bg`, `surface`, `subtle` in both themes; always with a legend. */
  --series-c: #5666ab; /* Chart series C: indigo, strong tier, dot 1.5 3.5 round caps, diamond marker. At least 3:1 on `bg`, `surface`, `subtle` in both themes; always with a legend. */
  --series-d: #809148; /* Chart series D: moss, soft tier, dash-dot 8 3 1.5 3, triangle marker. At least 3:1 on `bg`, `surface`, `subtle` in both themes; always with a legend. */
  --series-e: #98507a; /* Chart series E: plum, strong tier, long dash 12 4, hollow ring marker. At least 3:1 on `bg`, `surface`, `subtle` in both themes; always with a legend. */
  --series-f: #768a9f; /* Chart series F: slate, soft tier, thin 1.5px solid, no marker; reserved for "other / the rest" (a 7th+ series folds into it). At least 3:1 on `bg`, `surface`, `subtle` in both themes; always with a legend. */
  --shadow-overlay: 0 2px 4px #0000000d, 0 8px 24px #00000014; /* Menus, popovers, dropdowns, tooltips, toasts — with a `line` border. */
  --shadow-dialog: 0 4px 8px #00000014, 0 24px 48px #0000001f; /* Dialogs and drawers above a scrim. */
  --state-hover: inset 0 0 0 999px #00000014; /* Hover on an `action` fill: darkens it in place (label contrast rises). Not an elevation. */
  --state-pressed: inset 0 0 0 999px #00000029; /* Pressed on an `action` fill. Quiet controls use `subtle` (hover) and `line` (pressed) fills instead. */
}
[data-theme="dark"] {
  --bg: #262626;
  --surface: #303030;
  --subtle: #383838;
  --text: #f0ede7;
  --muted: #bbbdb7;
  --line: #4a4a4a;
  --control: #858585;
  --action: #a66042;
  --link: #d5a082;
  --success: #88c6a6;
  --success-bg: #293930;
  --info: #8bc1d5;
  --info-bg: #29363d;
  --warning: #dbb875;
  --warning-bg: #3a3429;
  --danger: #e69f98;
  --danger-bg: #3f2d2d;
  --action-border: #ba7c5f;
  --progress-fill: #d5a082;
  --on-action: #ffffff;
  --focus: var(--action-border);
  --scrim: #0000008a;
  --brand: #e38d6d;
  --copper: var(--link);
  --copper-bg: #493224;
  --copper-fill: var(--action);
  --copper-deep: #602505;
  --patina: #74c0c1;
  --patina-bg: #223c3c;
  --patina-fill: #007678;
  --indigo: #9faee1;
  --indigo-bg: #313647;
  --indigo-fill: #54639e;
  --moss: #aab882;
  --moss-bg: #343926;
  --moss-fill: #606f2a;
  --plum: #d49ebb;
  --plum-bg: #43303a;
  --plum-fill: #8d5074;
  --on-fill: #ffffff;
  --series-a: #d7a180;
  --series-b: #29a0a3;
  --series-c: #aabbf5;
  --series-d: #86974e;
  --series-e: #e6a8ca;
  --series-f: #7c90a6;
  --shadow-overlay: 0 2px 4px #00000040, 0 8px 24px #00000066;
  --shadow-dialog: 0 4px 8px #00000052, 0 24px 48px #00000080;
  --state-hover: inset 0 0 0 999px #00000024;
  --state-pressed: inset 0 0 0 999px #0000003d;
}
:root {
  --space-0: 0px; /* Flush: stacked rows that share one hairline. */
  --space-2: 2px; /* Focus-ring offset; optical nudges inside badges. */
  --space-4: 4px; /* Status dot to badge text; label to helper text. */
  --space-8: 8px; /* Icon slot to label inside buttons; gap between chips and inline controls. */
  --space-12: 12px; /* Between stacked controls (ادامه above انصراف); badge inline padding is 8–12. */
  --space-16: 16px; /* Control inline padding; table cell inline padding; compact card padding. */
  --space-20: 20px; /* Gap between form fields; list row block padding. */
  --space-24: 24px; /* Card padding; gap between cards in a grid. */
  --space-32: 32px; /* Between sections inside a page. */
  --space-40: 40px; /* Page inline margin on desktop. */
  --space-48: 48px; /* Between major page regions; header to first section. */
  --space-64: 64px; /* Empty and error states; top breathing room on landing views. */
  --radius-mark: 2px; /* Marks under 12px, too small for the other steps: the 8px category swatch, the 10px eyebrow square, the ends of a split bar and its legend swatches, the cover's swatches. Never a surface or a control. */
  --radius-badge: 6px; /* Badges, status chips, tooltips, checkbox. */
  --radius-control: 8px; /* Buttons, icon buttons, inputs, selects, segmented controls, menu items. */
  --radius-card: 12px; /* Cards, panels, table frames, menus and popovers. */
  --radius-large: 16px; /* Dialogs, drawers, large media. */
  --control-height: 44px; /* Buttons, icon buttons, inputs, selects, segmented controls (default density). */
  --control-height-compact: 32px; /* Compact density only (dense tables, toolbars): visual size of icon buttons; the hit area still extends to `touch-target`. Keep `space-12` between compact controls. */
  --tab-height: 48px; /* Tab bars and top navigation items. */
  --touch-target: 44px; /* Minimum hit area; a smaller visual control (compact icon button, checkbox) extends its hit area to this. */
  --icon-sm: 16px; /* Icons inside badges and dense table rows. */
  --icon-md: 20px; /* Icons in buttons, inputs, menus; the button icon-slot width. */
  --icon-lg: 24px; /* Standalone icons, empty states, navigation. */
  --focus-width: 2px; /* Focus outline thickness. */
  --focus-offset: 2px; /* Gap between a control and its focus outline. */
  --brand-mark-sm: 24px; /* Logo height in dense app headers and compact toolbars. Width follows the artwork; never below 20px; clear space a quarter of the height. */
  --brand-mark-md: 32px; /* Logo height in product and marketing headers (the `AppHeader` brand slot) and in footers; the `BrandMark` default. */
  --brand-mark-lg: 56px; /* Logo height in the `copper-deep` band (`BrandBand`) and other large marketing logos. Footers use `brand-mark-md`. */
  --font-sans: IRANYekanX, Tahoma, "Segoe UI", system-ui, sans-serif;
  --text-heading-1: 600 30px/48px var(--font-sans); /* Page title, one per view. Never larger. */
  --text-heading-2: 600 20px/34px var(--font-sans); /* Section and card titles. */
  --text-body: 400 15px/26px var(--font-sans); /* Default reading text. */
  --text-body-strong: 600 15px/26px var(--font-sans); /* Row titles and key values inside body text. */
  --text-secondary: 400 14px/24px var(--font-sans); /* Metadata, helper text, table cells, descriptions. */
  --text-control: 500 14px/24px var(--font-sans); /* Tabs, inputs, selects, menu items. */
  --text-control-strong: 600 14px/24px var(--font-sans); /* Button labels. */
  --text-caption: 500 12px/20px var(--font-sans); /* Badges, column headers, chart labels. 12px is the floor for product text. */
  --text-latin-id: 400 14px/24px var(--font-sans); /* IDs, file names, codes, versions inside Persian UI. */
  --text-latin-body: 400 15px/26px var(--font-sans); /* English copy in LTR products and admin tools. */
  --text-display-1: 600 52px/76px var(--font-sans); /* Page hero title, one per page, on containers ≥ 768px. Below 768px it steps down to `display-2`. */
  --text-display-2: 600 36px/56px var(--font-sans); /* Marketing section titles and the copper-deep band headline on containers ≥ 768px; the hero title below 768px. */
  --text-display-3: 600 26px/42px var(--font-sans); /* Marketing section titles and band headline below 768px. */
  --text-lead: 400 18px/32px var(--font-sans); /* The one intro paragraph under a display title. Below 768px use `body`. */
  --text-figure: 600 40px/56px var(--font-sans); /* Key numbers and prices on expressive surfaces (Persian digits). Below 768px use `display-3`. */
  --text-eyebrow: 600 14px/24px var(--font-sans); /* One kicker per section above a display title, in `copper`, led by a 10px `brand` square. */
}
.heading-1 {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: 0;
}
.heading-2 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0;
}
.secondary {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.control {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
.control-strong {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.latin-id {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.latin-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.display-1 {
  font-family: var(--font-sans);
  font-size: 52px;
  line-height: 76px;
  font-weight: 600;
  letter-spacing: 0;
}
.display-2 {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 56px;
  font-weight: 600;
  letter-spacing: 0;
}
.display-3 {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 42px;
  font-weight: 600;
  letter-spacing: 0;
}
.lead {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}
.figure {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 56px;
  font-weight: 600;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
@font-face {
  font-family: "IRANYekanX";
  src: url("fonts/IRANYekanXVF.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}