/* GENERATED by angular/scripts/build-host-theme.mjs — do not edit by hand.
 *
 * The design system's token layer and webfonts, copied into the MVC host so the server-rendered
 * account pages (login, register, forgot password) can be styled from the same vocabulary as the
 * Angular app. Source of truth is angular/src/styles/express/_tokens.scss; change it there and
 * re-run `npm run build:assets`.
 *
 * Editing this file directly is the one thing that breaks the arrangement: the next build overwrites
 * it, silently. The hand-written half of the host's theme is wwwroot/global-styles.css.
 *
 * The design system specifies weight 600 for headings and buttons but ships no 600 face; CSS font
 * matching resolves a 600 request up to the 700 face rather than synthesising one.
 */

@font-face {
  font-family: 'Thmanyah Sans';
  src: url('/fonts/thmanyahsans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Thmanyah Sans';
  src: url('/fonts/thmanyahsans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Thmanyah Sans';
  src: url('/fonts/thmanyahsans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  src: url('/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Express Travel — design tokens.
   Values are verbatim from `Express Travel Design System/tokens/express.css`, which is itself
   generated from `Express system V7_LTR_RTL.fig`. Do not hand-tune a value here: change it in the
   design system and re-copy, otherwise the app and the design system drift apart.

   BRD §2.4 asks for exactly one token file so the design system can drop in wholesale. This is it.
   `_theme.scss` maps these onto LeptonX / Bootstrap variables; nothing else should read --lpx-*. */

:root {
  /* ── Type families ───────────────────────────────────────────── */
  --font-display: 'Thmanyah Serif Display', 'Thmanyah Sans', Georgia, serif;
  --font-serif-text: 'Thmanyah Serif Text', Georgia, serif;
  --font-body: 'Thmanyah Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-ui: var(--font-body);

  /* ── Type scale ──────────────────────────────────────────────── */
  --text-xs: 12px;
  --text-xs-lh: 18px;
  --text-sm: 14px;
  --text-sm-lh: 20px;
  --text-md: 16px;
  --text-md-lh: 24px;
  --text-lg: 18px;
  --text-lg-lh: 28px;
  --text-xl: 20px;
  --text-xl-lh: 30px;
  --display-xs: 24px;
  --display-xs-lh: 32px;
  --display-sm: 30px;
  --display-sm-lh: 38px;
  --display-md: 36px;
  --display-md-lh: 44px;
  --display-lg: 48px;
  --display-lg-lh: 60px;
  --display-xl: 60px;
  --display-xl-lh: 72px;
  --display-2xl: 72px;
  --display-2xl-lh: 90px;
  --tracking-display-md: -0.72px;
  --tracking-display-lg: -0.96px;
  --tracking-display-xl: -1.2px;
  --tracking-display-2xl: -1.44px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* A real 900 outline ships in `_fonts.scss`, so this is the Black face rather than a weight
     the browser synthesises from Bold. Frame `523:1860` draws the agency countdown at it. */
  --weight-black: 900;

  /* ── Brand (Express navy) — note the ramp is INVERTED: 25 is palest, 600+ near-black ── */
  --brand-25: rgb(204, 208, 214);
  --brand-50: rgb(153, 162, 174);
  --brand-100: rgb(127, 138, 153);
  --brand-200: rgb(102, 115, 133);
  --brand-300: rgb(76, 91, 113);
  --brand-400: rgb(51, 69, 93);
  --brand-500: rgb(0, 22, 52);
  --brand-600: rgb(0, 19, 44);
  --brand-700: rgb(0, 16, 38);
  --brand-800: rgb(0, 8, 18);
  --brand-900: rgb(0, 6, 13);
  --brand-950: rgb(0, 2, 6);
  /* The logomark's red, and the mid blue that sits between it and brand-500. Neither is a step on
     the inverted brand ramp above and neither is a *semantic*: the error red is rgb(217, 45, 32),
     two hues away. They exist for one reason — they are the upper two stops of the brand gradient
     the frames put behind an identity, and naming them is what keeps that gradient from being three
     raw hex values written at the point of use. */
  --brand-mid: rgb(36, 56, 107);
  --brand-red: rgb(201, 27, 40);
  /* KSA flag green — the system's border-primary and its only accent. Sparingly; never a large fill. */
  --accent-green: rgb(27, 131, 84);

  /* ── Text ────────────────────────────────────────────────────── */
  --text-primary: rgb(24, 29, 39);
  --text-secondary: rgb(65, 70, 81);
  --text-tertiary: rgb(83, 88, 98);
  --text-quaternary: rgb(113, 118, 128);
  --text-placeholder: rgb(113, 118, 128);
  --text-disabled: rgb(133, 138, 148);
  --text-white: rgb(255, 255, 255);
  --text-brand-primary: var(--brand-900);
  --text-brand-secondary: var(--brand-700);
  --text-error: rgb(217, 45, 32);
  --text-warning: rgb(220, 104, 3);
  --text-success: rgb(7, 148, 85);

  /* ── Surfaces — two per screen max: white and #FAFAFA, plus navy brand bands ── */
  --bg-primary: rgb(255, 255, 255);
  --bg-secondary: rgb(250, 250, 250);
  /* The `*-solid` steps, all of them gray/success/warning-600 in the Figma file. Added when page
     04's dashboard tiles needed a *filled* disc behind a featured icon rather than the tinted badge
     `.et-featured-icon` draws — real design-system tokens, not ours, so no --et- prefix.
     `bg-error-solid` and `bg-brand-solid` were already here. */
  --bg-secondary-solid: rgb(83, 88, 98);
  --bg-success-solid: rgb(7, 148, 85);
  --bg-warning-solid: rgb(220, 104, 3);
  --bg-secondary-subtle: rgb(253, 253, 253);
  --bg-tertiary: rgb(245, 245, 245);
  --bg-quaternary: rgb(229, 229, 229);
  --bg-active: rgb(250, 250, 250);
  --bg-disabled: rgb(245, 245, 245);
  /* gray-50. The *subtle* disabled fill: a control that is inert but still readable, which is the
     state frame 54:2039 draws its two fields in. --bg-disabled above is a step darker and reads as
     "switched off"; the frame wants "not yours to type in yet". */
  --bg-disabled-subtle: rgb(250, 250, 250);
  --bg-brand-solid: var(--brand-600);
  --bg-brand-solid-hover: var(--brand-700);
  --bg-brand-section: var(--brand-800);
  --bg-brand-primary: var(--brand-50);

  /* **The brand band behind an identity** — the profile cover, frame `866:5153`, measured off the
     RTL render rather than read off the layer: navy at the top edge, through the mid blue, to the
     logomark's red by 71%, on a 171.05° axis. Over a band 1016 wide and 160 tall that axis is close
     enough to the diagonal that the red pools under the avatar, which is the whole point of it.
     A gradient and not a colour, so it is `background-image` at the point of use.

     It is one value in both themes: this is a coloured field, not a surface, so it does not follow
     the dark theme's rule of moving the brand steps lighter up the ramp. */
  --bg-brand-cover: linear-gradient(
    171.05deg,
    var(--brand-500) 0%,
    var(--brand-mid) 42.857%,
    var(--brand-red) 71.429%
  );
  --bg-error-solid: rgb(217, 45, 32);
  --bg-error-primary: rgb(254, 243, 242);
  /* error-100, one step louder than bg-error-primary. The design system defines it
     (`--colors-background-bg-error-secondary` in fig-tokens.css); nothing needed it here until the
     auth screens' Alert / Error, which is drawn on this step rather than on the 50. */
  --bg-error-secondary: rgb(254, 228, 226);
  --bg-warning-primary: rgb(255, 250, 235);
  --bg-success-primary: rgb(236, 253, 243);
  /* Blue, promoted from the reference ramp because frame `316:2615` names it: the payment method
     badge is `utility-blue-50` on `utility-blue-200` with `utility-blue-700` text. The badge sheet
     asks for exactly this — an alias in the token layer, never a literal at the call site. */
  --bg-blue-primary: rgb(239, 248, 255);
  --bg-overlay: rgba(12, 17, 29, 0.7);

  /* ── Borders — always 1px ────────────────────────────────────── */
  --border-primary: rgb(213, 215, 218);
  --border-secondary: rgb(233, 234, 235);
  --border-tertiary: rgb(240, 240, 240);
  --border-brand: var(--brand-500);
  --border-error: rgb(253, 162, 155);

  /* ── Utility ring colours ────────────────────────────────────
     The 200 step of each family, which is the ring `et-featured-icon` draws — Figma's
     `Component colors/Utility/{Colour}/utility-{colour}-200`. Real variables from the file rather
     than app-level additions; they were simply not among the ones ported, because until the
     dashboard's tiles were measured nothing asked for a 200. Gray's already exists under its
     semantic name (`--border-secondary`), so it is not restated here. */
  --utility-brand-200: var(--brand-200);
  --utility-blue-200: rgb(178, 221, 255);
  --utility-success-200: rgb(171, 239, 198);
  --utility-warning-200: rgb(254, 223, 137);
  --utility-error-200: rgb(254, 205, 202);

  /* The -700 steps, which are what a tinted badge writes on its own tint. `Badge.jsx` pairs each
     colour with a *darker* foreground than the page's semantic one — `--text-error` is error-600 and
     reads as a message, where a badge is a label sitting on error-50 and wants the step below it.
     Frame `308:1027`'s `مطلوب` binds `utility-error-700` by name. */
  --utility-error-700: rgb(180, 35, 24);
  --utility-warning-700: rgb(181, 71, 8);
  --utility-blue-700: rgb(23, 92, 211);
  --utility-success-700: rgb(6, 118, 71);
  --border-disabled: rgb(212, 212, 212);
  --border-accent: var(--accent-green);

  /* ── Icon / foreground ───────────────────────────────────────── */
  --fg-primary: rgb(24, 29, 39);
  --fg-secondary: rgb(65, 70, 81);
  --fg-tertiary: rgb(83, 88, 98);
  --fg-quaternary: rgb(113, 118, 128);
  /* The design system defines quaternary foreground at TWO ramp steps and they are not
     interchangeable: -500 (above) is gray-500 #717680, -400 is gray-400 #a4a7ae. Page 04's tile
     captions and rail labels cite the 400, which is a full step lighter. Added rather than
     repointing the one above, which other screens already read. */
  --fg-quaternary-400: rgb(164, 167, 174);
  --fg-quinary: rgb(153, 162, 174);
  --fg-white: rgb(255, 255, 255);
  --fg-brand-primary: var(--brand-600);
  /* success-500, and a real Figma variable (`Colors/Foreground/fg-success-secondary`) rather than an
     app-level addition — it was simply not among the ones ported. The sidebar's account card draws
     its online dot in it, and the nearest token already here is `--bg-success-solid` at success-600,
     which is a step darker. */
  --fg-success-secondary: rgb(23, 178, 106);
  /* gray-400, and it was `rgb(163, 163, 163)` until 10 September 2026 — a pure neutral grey with
     no counterpart anywhere in the Figma variables, so every disabled control was a shade the
     design system does not contain. `Colors/Foreground/fg-disabled` on node `3287:427327` is
     #A4A7AE, the same value `--fg-quaternary-400` already carries under the other name it has in
     the file. The client, that day: `لون زرار الديسيبل غلط في السيستم`. */
  --fg-disabled: rgb(164, 167, 174);
  /* gray-300 — `Colors/Foreground/fg-disabled_subtle`, the step below it. A disabled control's
     *glyph* is drawn in this and its label in the one above, which is what keeps an icon-and-label
     button from reading as two live elements at one weight. Same value as `--border-primary`,
     deliberately not aliased to it: they are two roles that happen to meet at one colour, and the
     day the ramp moves they move apart. */
  --fg-disabled-subtle: rgb(213, 215, 218);

  /* ── Radius — 8px is the default (buttons, inputs, selects) ──── */
  --r-none: 0px;
  --r-xxs: 2px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  /* The card radius, and deliberately not a step on the scale above. Every frame that draws a
     card in this product rounds it to 14 — page 04 and page 05 alike — and the scale jumps 12
     to 16, so a card either matches the design or matches the scale. The client settled it on
     27 August 2026: match the design. Named for the surface so it cannot be reached for as a
     general step, which is what would put an unscaled radius on a button next. */
  --r-card: 14px;
  --r-2xl: 16px;
  --r-3xl: 20px;
  --r-4xl: 24px;
  --r-full: 9999px;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --sp-none: 0px;
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-sm: 6px;
  --sp-md: 8px;
  --sp-lg: 12px;
  --sp-xl: 16px;
  --sp-2xl: 20px;
  --sp-3xl: 24px;
  --sp-4xl: 32px;
  --sp-5xl: 40px;
  --sp-6xl: 48px;
  --sp-7xl: 64px;
  --sp-8xl: 80px;
  --sp-9xl: 96px;
  --sp-10xl: 128px;
  --sp-11xl: 160px;

  /* ── Widths + containers ─────────────────────────────────────── */
  --w-xxs: 320px;
  --w-xs: 384px;
  --w-sm: 480px;
  --w-md: 560px;
  --w-lg: 640px;
  --w-xl: 768px;
  --w-2xl: 1024px;
  --w-3xl: 1280px;
  --w-4xl: 1440px;
  --w-5xl: 1600px;
  --w-6xl: 1920px;
  --container-max: 1280px;
  --container-pad-desktop: 32px;
  --container-pad-mobile: 16px;

  /* ── Shadows — black-based in this file, not slate ───────────── */
  --shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  --shadow-sm: 0px 1px 3px 0px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
  --shadow-md: 0px 4px 8px -2px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
  --shadow-lg:
    0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03),
    0px 2px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-xl:
    0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03),
    0px 3px 3px -1.5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
  --shadow-3xl:
    0px 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);

  /* Skeuomorphic inner strokes — the single most recognisable detail of the system.
     Solid controls look pressed into the surface rather than floating on it. */
  --ring-solid: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
  --ring-white: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
  --ring-secondary:
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05);
  --focus-ring: 0px 0px 0px 4px rgba(0, 22, 52, 0.24);
  --focus-ring-error: 0px 0px 0px 4px rgba(240, 68, 56, 0.24);
  /* Cards draw their edge as an inset shadow, never border + shadow doubled. */
  --card-inset-border: inset 0 0 0 1px rgb(233, 234, 235);

  /* ── Motion — restrained and short. No spring, no bounce. ────── */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 100ms;
  --dur-base: 150ms;
  --dur-slow: 250ms;

  /* The product's own three bands, from the client's motion brief of 25 August 2026, and **the
     only durations anything in the app actually uses**. The three above are the design system's
     published values and stay verbatim; these are one notch longer, because 100ms is below the
     point at which a hover reads as a transition rather than as a redraw.

     App-owned, and here rather than in `_motion.scss` for the same reason `--et-control-pad-y` and
     `--et-tree-step` are here: `build-host-theme.mjs` copies this file into the .NET host, which
     serves the sign-in pages from their own stylesheet. A motion token defined anywhere else is
     undefined on that surface — and an undefined custom property renders as *nothing*, silently,
     which is the failure `scripts/check-tokens.mjs` exists to catch and cannot see across that
     boundary.

     `--motion-step` is the delay between one card in a group and the next; `--motion-lift` is how
     far an interactive card rises under the pointer, and is the only lift distance in the product.
     What each band is for is in `_motion.scss`, which is the one file that assigns them. */
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 320ms;
  --motion-step: 40ms;
  --motion-lift: -2px;

  /* ── Raw RGB triplets ────────────────────────────────────────────
     LeptonX composes some of its variables inside rgba(), so it needs bare
     "r, g, b" channel lists rather than rgb() function values. Kept adjacent to
     their source token so the two are updated together. */
  --et-brand-600-rgb: 0, 19, 44;
  --et-brand-800-rgb: 0, 8, 18;
  --et-text-primary-rgb: 24, 29, 39;
  --et-white-rgb: 255, 255, 255;

  /* ── App-level additions ─────────────────────────────────────────
     NOT from the Figma file. The design system defines secondary text on light surfaces but no
     equivalent for text sitting on a navy brand band, which the app shell and hero both need.
     Kept behind the --et- prefix so it is obvious at a glance that these are ours to change and
     the tokens above are not. Replace with real values if the design system later defines them. */
  --et-on-brand-text: rgba(255, 255, 255, 0.72);
  --et-on-brand-text-strong: rgb(255, 255, 255);
  /* Divider on a navy band. The design system uses this value inline in Footer.jsx but defines no
     border token for dark surfaces — --border-secondary is a light-surface grey and disappears. */
  --et-on-brand-border: rgba(255, 255, 255, 0.12);

  /* The auth brand panel's fill.

     Frames 130:110, 130:144, 130:182 and 502:215 all bind it to `Colors/Text/text-primary (900)` —
     a *text* token used as a fill, which the design system has no background alias for
     (`bg-primary-solid` is gray-950, two steps darker, and `bg-brand-section` is brand-800, which
     is the navy the server-rendered pages use). Named here rather than writing
     `background-color: var(--text-primary)` at the call site, where it reads as a mistake.

     It therefore differs from the Razor auth panel's --bg-brand-section on purpose: those five
     pages are dead once `responseType` is `password`, and where the frames and the older surface
     disagree the frames win. */
  --et-auth-brand-bg: var(--text-primary);

  /* Control padding. Buttons and inputs at the default `md` size are 40px tall, which the design
     system reaches with 10px of vertical padding (`Button.d.ts`, `InputField.d.ts`). 10 is not a
     step on the spacing scale — the scale runs 8, 12 — because it is a component dimension rather
     than layout spacing. Named here so it is stated once instead of appearing as a bare literal in
     every control rule. */
  --et-control-pad-y: 10px;

  /* A financial statement's indentation, set per row by the report viewer from the server's own
     `ReportRow.Level`. Declared here only so the default is a real length: `calc()` cannot add a
     unitless zero, and a fallback written inline would be the one raw px literal outside this file. */
  --et-report-indent: 0px;

  /* One step of an account hierarchy's indentation.
     
     It is here rather than in the components because there are two of them and they had drifted:
     the report viewer stepped a balance sheet by 16px and the chart-of-accounts screen stepped the
     same accounts by 20px, so the same tree read at two rhythms depending on which screen you were
     on. Neither number was wrong; having two was. A component dimension that more than one component
     needs is not a component dimension. */
  --et-tree-step: 16px;

  /* The gap between a condensed rail step's label and its caption, measured off frame 304:740 —
     3px, which falls between the spacing scale's 2 and 4. It is here rather than as a literal in
     journey-rail.component.scss because the raw-px rule is what keeps a one-off measurement from
     becoming a habit, and rounding it to a scale step would move the only two lines on the
     dashboard's rail that have to sit tight together. */
  --et-rail-caption-gap: 3px;

  /* Icon size inside a button or input. The design system states the sizing rule in prose — "16px
     inside badges and tags, 20px inside buttons and inputs, 24px in nav and feature blocks" — but
     ships no token for it. Needed wherever CSS has to reserve space for an icon it does not draw. */
  --et-icon-in-control: 20px;
  --et-icon-in-nav: 24px;
  /* The third step of that same rule, added when page 03's inputs needed it: the affordance at a
     control's inline end — a password toggle, a help tooltip — is 16px, not 20px. */
  --et-icon-in-badge: 16px;

  /* The auth brand panel's inline padding. 56px is not a step on the spacing scale (which runs
     48, 64) and is what all four page-03 frames measure: the panel is 560 wide, the logo ends at
     504 and the tagline runs 56 → 504. Named rather than rounded, per the design system's rule for
     a value that falls between steps because the file says so. */
  --et-auth-pad-inline: 56px;

  /* ── Layering ────────────────────────────────────────────────────
     The design system ships no z-index tokens; its components hardcode a ladder (Select menu 20,
     nav account menu 30, tooltip and date popover 40, modal and drawer 60). Those numbers are
     reproduced here as tokens so every overlay we add — dropdowns, tooltips, toasts, dialogs —
     resolves against one scale instead of each picking its own literal.

     The upper values also have to clear Bootstrap's own ladder, which LeptonX and ng-bootstrap
     both rely on: .dropdown-menu 1000, .modal-backdrop 1040, .modal 1055, .tooltip 1080. Ours are
     offset above it so an Express overlay is never painted under a stock ABP one. */
  --et-z-dropdown: 1020;
  --et-z-sticky: 1030;

  /* **The drawer's scrim is its own step, and it sits BELOW the drawer.** `--et-z-scrim` is the
     *dialog's* scrim: a dialog is painted over its own dimming (`--et-z-modal`, above), which is
     why that value is the higher of the two. A drawer is not — the panel has to stay above the
     sheet that dims the page behind it. Reusing the dialog's token put a 70%-opaque sheet across
     the open menu on every role: it looked washed out, and because `elementFromPoint` returned the
     scrim over every row, **no nav row could be tapped and any touch closed the menu**. Measured at
     375x812 against the built bundle, 13 September 2026. 1044 is directly under the drawer and
     still clears Bootstrap's own `.modal-backdrop` at 1040, per the note above. */
  --et-z-drawer-scrim: 1044;
  --et-z-drawer: 1045;
  --et-z-scrim: 1050;
  --et-z-modal: 1060;
  --et-z-popover: 1070;
  --et-z-tooltip: 1090;
  --et-z-toast: 1100;
}