/* GEM — generated from tokens.json */
:root, [data-theme="light"] {
  --ink: #12171d; /* [APPROVED · J01] Principal dark field and default text colour. Text on white (18.0:1) and beige (8.2:1); signature surfaces carrying white or beige text. */
  --beige: #bcaca7; /* [APPROVED · J02] Signature soft-luxury tone. Selected-state fill with ink text (8.2:1), decorative hairlines, accent text on ink (8.2:1). Never essential text or a control boundary on white (2.2:1, prohibited by K05). */
  --black: #020202; /* [APPROVED · J03] Monochrome reproduction and hover/pressed action fill. Always #020202, never generic black. Black on white 20.8:1. */
  --white: #ffffff; /* [APPROVED · J04] Canvas and text on ink or black (18.0:1). Reversed logo on dark grounds only. */
  --surface-canvas: var(--white); /* [APPROVED] Default product surface. White canvas is the primary application mode. Text on it: text-primary. */
  --surface-signature: var(--ink); /* [APPROVED] Controlled dark signature surface (header, hero, footer, dark context). Text on it: text-inverse 18.0:1 or text-signatureAccent 8.2:1. Replaces a full dark mode, which is not required by default. */
  --surface-selected: var(--beige); /* [APPROVED] Fill of a selected or pressed control and a confirmation panel. Text on it: text-primary 8.2:1. Always paired with visible text or a mark, never fill alone. */
  --surface-disabled: var(--white); /* [APPROVED] Fill of a disabled control; the beige border and explanatory text carry the state. */
  --surface-scrim: rgba(18,23,29,0.64); /* [APPROVED · Q03] INK at 64% behind modals only: the only permitted elevation device. FUNCTIONAL / NON-EXPRESSIVE: not a brand colour, never decoration. */
  --text-primary: var(--ink); /* [APPROVED] Body, headings and labels on surface-canvas (18.0:1) and surface-selected (8.2:1). */
  --text-inverse: var(--white); /* [APPROVED] Text on surface-signature and action-background (18.0:1). */
  --text-signatureAccent: var(--beige); /* [APPROVED] Quiet accent text (eyebrow, secondary line) on surface-signature only (8.2:1). Never on white. */
  --border-essential: var(--ink); /* [APPROVED] Border that defines a control: inputs, buttons, chips, cards with actions. 1px; 18.0:1 on white. */
  --border-decorative: var(--beige); /* [APPROVED] Hairlines between sections and card edges carrying no meaning. Never the only cue for a control (2.2:1). */
  --border-focus: var(--ink); /* [APPROVED · Q08] Border of an input in focus, 2px, used with the focus ring and not instead of it. */
  --border-error: var(--ink); /* [APPROVED · Q09] Border of an invalid field or error panel, 2px (feedback-errorBorderWidth). The error is also stated in text; weight and wording carry the state, not colour. */
  --border-disabled: var(--beige); /* [APPROVED] Border of a disabled control. Decorative; the state is explained in text. */
  --action-background: var(--ink); /* [APPROVED] Fill of the primary action in default state. Label: action-foreground. */
  --action-foreground: var(--white); /* [APPROVED] Label on action-background and action-hoverBackground (18.0:1 and 20.8:1). */
  --action-hoverBackground: var(--black); /* [APPROVED] Primary action fill on hover over duration-hover. */
  --action-pressedBackground: var(--black); /* [APPROVED] Primary action fill while pressed. */
  --action-disabledBackground: var(--white); /* [APPROVED] Fill of a disabled action. Disabled actions explain themselves in nearby text. */
  --action-disabledText: var(--ink); /* [APPROVED] Label of a disabled action; stays 18.0:1. State is conveyed by fill, border, cursor and text. */
  --focus-light: var(--ink); /* [APPROVED] 2px focus ring on light grounds (surface-canvas, surface-selected), 2px offset. */
  --focus-dark: var(--white); /* [APPROVED] 2px focus ring on dark grounds (surface-signature, black), 2px offset. */
  --feedback-errorText: var(--ink); /* [APPROVED] Error message text on surface-canvas. Always names the correction. No red. */
  --feedback-successText: var(--ink); /* [APPROVED] Confirmation text on surface-canvas or surface-selected. Describes the completed action. No green. */
}
:root {
  --space-4: 4px; /* [APPROVED · N13] 0.25rem. Icon to label gap, tight inline spacing. Fixed at every breakpoint. */
  --space-8: 8px; /* [APPROVED · N13] 0.5rem. Label to field gap, error text margin. Fixed. */
  --space-12: 12px; /* [APPROVED · N13] 0.75rem. Input padding, button vertical padding. Fixed. */
  --space-16: 16px; /* [APPROVED · N13] 1rem. Gap between related controls; compact and mobile page margin. Fixed. */
  --space-24: 24px; /* [APPROVED · N13] 1.5rem. Gutter at tablet and desktop; mobile page margin; field group spacing. */
  --space-32: 32px; /* [APPROVED · N13] 2rem. Tablet page margin; space between content groups. */
  --space-48: 48px; /* [APPROVED · N13] 3rem. Desktop page margin; section spacing; top padding of the main column. */
  --space-64: 64px; /* [APPROVED · N13] 4rem. Large section separation and column gap on desktop. */
  --space-96: 96px; /* 6rem. [APPROVED · N13] Editorial section separation at Desktop and Wide, where 64 reads cramped against displayXL. Not used below 1024px. */
  --radius-editorial: 0; /* [APPROVED] Editorial surfaces: cards, panels, images, hero fields. Square. */
  --radius-control: 4px; /* [APPROVED] Interactive controls: buttons, inputs, selects, chips. No other radius without functional justification. */
  --target-min: 44px; /* Minimum width and height of any interactive target (V12, WCAG 2.2 target size). */
  --logo-lockup-min: 120px; /* [APPROVED · H10] Minimum digital width of the horizontal lockup. */
  --logo-symbol-min: 32px; /* [APPROVED · H11] Minimum standalone symbol. Below it use the no-spark symbol (H12), supplied in the kit; acceptance PENDING (VAL-02). */
  --border-hairline: 1px; /* Default control and decorative border. */
  --border-emphasis: 2px; /* Focus border, error border, selected-tab underline. */
  --focus-width: 2px; /* Focus ring thickness. */
  --focus-offset: 2px; /* Gap between control and focus ring. */
  --glyph-sm: 16px; /* Functional glyph inline with 14px to 16px text. */
  --glyph-md: 20px; /* Glyph in controls and buttons. */
  --glyph-lg: 24px; /* Default glyph size and optical box. */
  --glyph-xl: 32px; /* Amenity pictograms in digital wayfinding; also the smallest standalone symbol size (H11). */
  --feedback-errorBorderWidth: 2px; /* [APPROVED · Q09] Error border weight; state is carried by weight and text, never colour. */
  --feedback-infoBorderWidth: 1px; /* [APPROVED · Q10] Information panel border weight. */
  --breakpoint-compact: 0px; /* [APPROVED · Q17] Compact band, 0 to 479px. */
  --breakpoint-mobile: 480px; /* [APPROVED] Mobile starts. Below it is Compact (479px and under). */
  --breakpoint-tablet: 720px; /* [APPROVED] Tablet starts. */
  --breakpoint-desktop: 1024px; /* [APPROVED] Desktop starts. */
  --breakpoint-wide: 1440px; /* [APPROVED] Wide: a max-width enhancement of desktop, not a separate interaction model (Q17). */
  --max-content: 1080px; /* [CONDITIONAL] Maximum content width at desktop. */
  --max-wide: 1280px; /* [CONDITIONAL] Maximum content width at 1440px and up; content centres, margins grow. */
  --max-modal: 440px; /* [CONDITIONAL · Q17] Maximum modal width at Tablet and up; full width minus 24px below. */
  --max-reading: 70ch; /* [APPROVED] Maximum measure for running text (L11: 45 to 75 characters). */
  --reflow-min: 320px; /* [APPROVED · V01] Content reflows at 320 CSS px without two-direction scrolling (WCAG 1.4.10). */
  --gutter-compact: 16px; /* [CONDITIONAL] Column gutter at Compact (479px and under). */
  --gutter-mobile: 16px; /* [CONDITIONAL] Column gutter at Mobile (480 to 719px). */
  --gutter-tablet: 24px; /* [CONDITIONAL] Column gutter at Tablet (720 to 1023px). */
  --gutter-desktop: 24px; /* [CONDITIONAL] Column gutter at Desktop (1024 to 1439px). */
  --gutter-wide: 24px; /* [CONDITIONAL · Q17] Column gutter at Wide (1440px and up). */
  --margin-compact: 16px; /* [CONDITIONAL] Page margin at Compact. */
  --margin-mobile: 24px; /* [CONDITIONAL] Page margin at Mobile. */
  --margin-tablet: 32px; /* [CONDITIONAL] Page margin at Tablet. */
  --margin-desktop: 48px; /* [CONDITIONAL] Page margin at Desktop. */
  --margin-wide: 48px; /* [CONDITIONAL · Q17] Page margin at Wide; content centres at max-wide. */
  --columns-compact: 4; /* [CONDITIONAL] Grid columns at Compact. */
  --columns-mobile: 4; /* [CONDITIONAL] Grid columns at Mobile. */
  --columns-tablet: 8; /* [CONDITIONAL] Grid columns at Tablet. */
  --columns-desktop: 12; /* [CONDITIONAL] Grid columns at Desktop. */
  --columns-wide: 12; /* [CONDITIONAL · Q17] Grid columns at Wide. */
  --duration-instant: 0ms; /* [APPROVED] Reduced motion: every transition and animation duration. */
  --duration-hover: 150ms; /* [APPROVED] Hover colour change. */
  --duration-confirmation: 180ms; /* [APPROVED] Confirmation state appearing. */
  --duration-modal: 200ms; /* [APPROVED] Modal appearing; reduced to 0ms under reduced motion. */
  --duration-reveal: 1500ms; /* [APPROVED] Full mark reveal, total (P02). */
  --reveal-ring: 900ms; /* [CONDITIONAL] Reveal step 1: ring draws on, from 0ms. CONDITIONAL on motion master QA (VAL-14). */
  --reveal-spark: 200ms; /* [CONDITIONAL] Reveal step 2: spark flashes, from 900ms. */
  --reveal-quarter: 400ms; /* [CONDITIONAL] Reveal step 3: quarter fills, from 1100ms. */
  --easing-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* [APPROVED] The only easing: smooth ease-out, reversed for exits. No bounce, elastic or overshoot (P03, P04). */
  --locale-source: en; /* [APPROVED] Source language of the system (D03). */
  --locale-arabic: ar-SA; /* [PENDING VALIDATION · D04] Arabic locale for Saudi/GCC (VAL-07). Do not release Arabic before AC10 is resolved. */
  --numerals-technical: latn; /* [APPROVED · M12] Latin 0-9 for SKU, code, URL, phone and technical identifiers in every locale. */
  --numerals-guestArabic: arab; /* [CONDITIONAL] Arabic-Indic numerals for Arabic guest-facing copy where appropriate (M11). */
  --calendar-default: gregory; /* [CONDITIONAL · DS06] Default calendar. Hijri display policy is [REQUIRES OWNER · Arabic / Localization Lead]. */
  --text-expansion: 30-40%; /* [APPROVED · DS06] Width allowance for translated strings; never fix label widths. */
  --direction-arabic: rtl; /* [APPROVED · M06] dir for ar-SA; en is ltr. */
  --font-display: "Jost", sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-arabic: "Noto Sans Arabic", sans-serif;
  --text-displayXL: 400 96px/104px var(--font-display); /* [CONDITIONAL] Hero statement, desktop 1024px and up. Capitals. Tracking 0.12em from register L09; final value needs optical QA in templates. Weight 400. Steps down to display 64 at 720px, h1 48 at 480px and 40px at Compact. */
  --text-display: 400 64px/72px var(--font-display); /* [CONDITIONAL] Statements and section openers. Capitals. 0.08em tested visually in Jost at 64px; CONDITIONAL on optical QA (VAL-19). Weight 400. */
  --text-h1: 400 48px/56px var(--font-display); /* [CONDITIONAL] Page title. Sentence case. 0 to 0.02em allowed for normal headings (L09). Weight 400. */
  --text-h2: 400 32px/40px var(--font-display); /* [CONDITIONAL] Section heading. Sentence case. Weight 400. */
  --text-h3: 400 24px/32px var(--font-display); /* [CONDITIONAL] Card and panel title, such as a room name. No tracking. Weight 400. */
  --text-tagline: 400 14px/20px var(--font-display); /* [APPROVED] Primary tagline only, in capitals: HOSPITALITY, IN PERFECT PROPORTION. 0.18em from register L09. Never reworded, abbreviated or lowercased. Weight 400. */
  --text-eyebrow: 400 13px/16px var(--font-display); /* [CONDITIONAL] Short capitals label above a heading. 0.16em from register L09. One line, five words at most. Weight 400. */
  --text-navLabel: 400 14px/20px var(--font-display); /* [CONDITIONAL] Tracked capitals navigation on editorial signature surfaces only. Product UI navigation is sentence case at tracking 0 (body or label). Weight 400. */
  --text-labelSmall: 400 12px/16px var(--font-display); /* [CONDITIONAL] Small capitals data label (batch, reservation, room). 0.08em from register L09. 12px minimum. Weight 400. */
  --text-body: 400 16px/26px var(--font-sans); /* [APPROVED] Running text. Tracking normal (L10), left aligned, 45 to 75 characters per line, 1.6 line height by default. Weight 400. */
  --text-caption: 400 14px/20px var(--font-sans); /* [APPROVED] Help text, footnotes, version lines. Tracking normal. Weight 400. */
  --text-label: 400 16px/24px var(--font-sans); /* [APPROVED] Field labels, button labels, tabs, chips. Sentence case, tracking normal. 1.5 line height is the documented component exception to 1.6. Weight 400 in current implementation; 500 is FUTURE DESIGN INTENT, PENDING ACCEPTED FONT FILE. */
  --text-arabicDisplay: 400 56px/76px var(--font-arabic); /* [CONDITIONAL size · Arabic PENDING VALIDATION] Arabic statement. No tracking, ever (M05). Size and line height are working values; PENDING VALIDATION by native QA (VAL-07). Weight 400. */
  --text-arabicH1: 400 40px/60px var(--font-arabic); /* [CONDITIONAL size · Arabic PENDING VALIDATION] Arabic page title. PENDING VALIDATION. Weight 400. */
  --text-arabicH2: 400 30px/46px var(--font-arabic); /* [CONDITIONAL size · Arabic PENDING VALIDATION] Arabic section heading. PENDING VALIDATION. Weight 400. */
  --text-arabicH3: 400 24px/38px var(--font-arabic); /* [CONDITIONAL size · Arabic PENDING VALIDATION] Arabic card title. PENDING VALIDATION. Weight 400 in current implementation; 500 is FUTURE DESIGN INTENT, PENDING ACCEPTED FONT FILE. */
  --text-arabicBody: 400 18px/32px var(--font-arabic); /* [CONDITIONAL size · Arabic PENDING VALIDATION] Arabic running text; 18px against Latin 16px for optical parity, 1.8 line height. PENDING VALIDATION. Weight 400. */
  --text-arabicLabel: 400 16px/26px var(--font-arabic); /* [CONDITIONAL size · Arabic PENDING VALIDATION] Arabic controls and labels. PENDING VALIDATION. Weight 400 in current implementation; 500 is FUTURE DESIGN INTENT, PENDING ACCEPTED FONT FILE. */
  --text-arabicCaption: 400 15px/26px var(--font-arabic); /* [CONDITIONAL size · Arabic PENDING VALIDATION] Arabic help text. PENDING VALIDATION. Weight 400. */
}
.displayXL {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 104px;
  font-weight: 400;
  letter-spacing: 0.12em;
}
.display {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 72px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 56px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}
.tagline {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.18em;
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.16em;
}
.navLabel {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.labelSmall {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.arabicDisplay {
  font-family: var(--font-arabic);
  font-size: 56px;
  line-height: 76px;
  font-weight: 400;
  letter-spacing: 0;
}
.arabicH1 {
  font-family: var(--font-arabic);
  font-size: 40px;
  line-height: 60px;
  font-weight: 400;
  letter-spacing: 0;
}
.arabicH2 {
  font-family: var(--font-arabic);
  font-size: 30px;
  line-height: 46px;
  font-weight: 400;
  letter-spacing: 0;
}
.arabicH3 {
  font-family: var(--font-arabic);
  font-size: 24px;
  line-height: 38px;
  font-weight: 400;
  letter-spacing: 0;
}
.arabicBody {
  font-family: var(--font-arabic);
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}
.arabicLabel {
  font-family: var(--font-arabic);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.arabicCaption {
  font-family: var(--font-arabic);
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/Jost-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("fonts/NotoSansArabic-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}