/*
 * Typography tokens — single source of truth for every font-size in the app.
 *
 * Both Tailwind utilities (text-hero, text-display, text-h1, ...,
 * text-micro) and inline styles (style="font-size:var(--fs-body)")
 * read from these variables. Editing any value here cascades through
 * the entire app at runtime — no rebuild required, since CSS
 * variables are evaluated by the browser, not at compile time.
 * Tailwind compiles e.g. `text-body` into
 * `font-size:var(--fs-body); line-height:var(--lh-relaxed)`.
 *
 * Scale rationale (2026-05 round-4 — rem rebase).
 *
 * Round-3 set the scale via `body { zoom: 0.85 }` to absorb a ~15%
 * overshoot without touching ~340 hardcoded values. Round-4 converts
 * that root-level scale into proper CSS values: `html { font-size:
 * 85% }` shifts the rem unit (1rem = 13.6px instead of 16px) and
 * tokens move to rem so every consumer scales with the root. The
 * 0.85 factor is preserved exactly:
 *
 *      px ÷ 16 = rem   (e.g. 36/16 = 2.25rem)
 *
 * At 16px root that resolves to 36px; at our 13.6px root it resolves
 * to 30.6px — the same screen size zoom: 0.85 produced from 36px.
 *
 *   hero    2.25rem (≈30.6px)  dashboard hero / request-detail title
 *   kpi     2.25rem (≈30.6px)  big numerals on KPI tiles
 *   display 1.75rem (≈23.8px)  generic large callouts (rare)
 *   h1      1.625rem(≈22.1px)  primary page title
 *   h2      1.375rem(≈18.7px)  card titles
 *   h3      1.1875rem(≈16.2px) in-card section titles
 *   body    1.125rem(≈15.3px)  default body text
 *   label   1rem    (≈13.6px)  form labels, buttons, nav
 *   meta    0.875rem(≈11.9px)  eyebrows, secondary metadata
 *   micro   0.8125rem(≈11.1px) numeric badge counts, Latin IDs
 *
 * Mobile bump (≤768px): meta and micro lift one step so dense Arabic
 * metadata stays legible on phones without changing desktop density.
 *
 * Line-heights unchanged (unitless multipliers always scale):
 *   tight 1.2   for displays, hero numbers (single-line emphasis)
 *   snug  1.35  for headings
 *   normal 1.5  for labels/meta
 *   relaxed 1.6 for body
 */

/* Global UI scale.
 *
 * Shrinking the root font-size to 85% turns 1rem into 13.6px (vs the
 * 16px UA default). Every rem-based size in the app — Tailwind
 * utilities (p-*, gap-*, text-*, …) and our own tokens — scales
 * proportionally without touching their declarations.
 *
 * Why root font-size and not `body { zoom }`:
 *   - `font-size:%` is universal CSS: predictable layout flow,
 *     correct hit-testing, no print/scroll/sticky surprises.
 *   - `zoom` is non-standard; Firefox only added support in v126
 *     (May 2024) and behavior under nested transforms still varies.
 *   - Respects user-agent base size: a user who sets their browser
 *     default to 20px gets 17px here, preserving accessibility.
 *
 * Form controls (input/select/textarea) inherit explicitly from base.css
 * so the rem rebase reaches them — UA stylesheets pin them to 16px
 * absolute by default. */
html { font-size: 85%; }

:root {
    --fs-hero:    2.25rem;
    --fs-kpi:     2.25rem;
    --fs-display: 1.75rem;
    --fs-h1:      1.625rem;
    --fs-h2:      1.375rem;
    --fs-h3:      1.1875rem;
    --fs-body:    1.125rem;
    --fs-label:   1rem;
    --fs-meta:    0.875rem;
    --fs-micro:   0.8125rem;

    --lh-tight:   1.2;
    --lh-snug:    1.35;
    --lh-normal:  1.5;
    --lh-relaxed: 1.6;
}

/* Phone-width legibility bump for the two smallest tiers. Vazirmatn
   metadata reads dense on physical phone DPI; lifting both one step
   absorbs that without disturbing desktop density. */
@media (max-width: 768px) {
    :root {
        --fs-meta:  0.9375rem;
        --fs-micro: 0.875rem;
    }
}

/*
 * Responsive breakpoints — single source of truth for the project's
 * media-query thresholds. CSS doesn't allow `var()` inside @media
 * conditions, so these are documentation tokens: every @media rule in
 * the codebase MUST use one of these exact px values verbatim, and
 * the family below is the only set we ship.
 *
 *   --bp-xs  320px   very small phone (iPhone SE landscape, narrow)
 *   --bp-sm  480px   phone portrait
 *   --bp-md  780px   phone landscape / large phone
 *   --bp-lg  1024px  tablet / small laptop boundary
 *   --bp-xl  1366px  small laptop / desktop boundary
 *
 * Methodology: mobile-first. Write the small-screen rule as the base
 * declaration; layer larger-viewport rules via @media (min-width: …).
 * Use max-width only when collapsing something that should stop at a
 * specific upper bound (e.g. dashboard 2-col → 1-col at the tablet
 * boundary).
 */
:root {
    --bp-xs: 320px;
    --bp-sm: 480px;
    --bp-md: 780px;
    --bp-lg: 1024px;
    --bp-xl: 1366px;
}

/*
 * Arabic typography hygiene.
 *
 * Arabic uses cursive letterforms — letters connect within a word
 * (آخر طلباتي → continuous flow). Any positive `letter-spacing`
 * inserts gaps that break those connections, making the text look
 * disjointed (آ خ ر | ط ل ب ا ت ي).
 *
 * In Latin typography, .14em letter-spacing is a common "eyebrow /
 * kicker" pattern (uppercase + spaced — see Stripe, Linear, etc.);
 * we inherited many such patterns (.tdash-eye, .pnl-title .eye,
 * .hello .eye, mobile-drawer-section, table-wrap th, etc.). They
 * all need to be neutralized when rendering Arabic.
 *
 * Apple, Google, and Material Design all strip letter-spacing for
 * Arabic. We do the same here via a single cascade rule that applies
 * to every descendant of an RTL/Arabic root. LTR sub-spans inside an
 * Arabic page (like the EMP-1234 code badge) `revert` to whatever
 * their per-class rule said.
 *
 * `text-transform: uppercase` is a no-op on Arabic (no case), but it
 * is left alone — strip-only-when-Arabic isn't expressible in CSS.
 * The visual artifact (gaps) is purely from letter-spacing, not from
 * the uppercase declaration.
 */
[dir="rtl"],
[dir="rtl"] *,
[lang="ar"],
[lang="ar"] * {
    letter-spacing: normal;
}

/* Allow Latin / numeric LTR sub-elements (codes, IDs, monospace
   stamps) inside an Arabic page to keep any letter-spacing their
   class explicitly declared. */
[dir="rtl"] [dir="ltr"],
[dir="rtl"] [dir="ltr"] *,
[lang="ar"] [lang="en"],
[lang="ar"] [lang="en"] *,
[dir="rtl"] .ar-num,
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] [class*="font-mono"] {
    letter-spacing: revert;
}