/*
 * Hospitality UI design tokens, light theme (v1.0, 2026-09-28)
 *
 * Normative source: docs/hospitality/ui/DESIGN_SYSTEM.md (section 5). If this file and the
 * document disagree, the document wins and this file is fixed.
 *
 * Build agents: copy this file unchanged to modules/hspui/views/css/hspui-tokens.css.
 * It is loaded LAST (after theme and module CSS) in the BO and FO. It contains custom
 * properties only, plus the reduced-motion override. Component CSS reads the semantic
 * and component tokens (sections 2-4), never the primitives directly, so the accent
 * presets, the custom accent and the sidebar variant can swap values without touching
 * components.
 *
 * Units: type, spacing and control sizes in rem. Both themes set html{font-size:62.5%}
 * (admin-theme.css and themes/hotel-reservation-theme/css/global.css), so 1rem = 10px and a
 * guest's browser font-size preference still scales the UI. Borders, radii and shadows in px.
 * Breakpoints are constants in comments (media queries cannot read custom properties).
 *
 * Contrast ratios in comments were computed with the WCAG 2.x relative-luminance formula
 * (floored to 2 decimals). AA: 4.5 text, 3.0 large text / UI parts / focus indicators.
 *
 * Root classes set by hspui in the <html> tag (template, not JS, so there is no flash):
 *   html.hsp-ui.hsp-ui-bo | html.hsp-ui.hsp-ui-fo
 *   html[lang^="ar"][dir="rtl"]        Arabic overrides (section 9)
 *   html[data-hsp-accent="lapis|ink"]  accent presets (section 10); custom accent = inline <style>
 *   html[data-hsp-sidebar="light"]     light BO sidebar variant (section 11)
 *   html[data-hsp-density="compact|comfortable"]  BO density (section 12)
 */

:root {
  /* ======================================================================
     1. PRIMITIVES
     ====================================================================== */

  /* Neutrals: papyrus, limestone, sandstone, stone, basalt (warm) */
  --hsp-white: #FFFFFF;
  --hsp-papyrus-25: #FBF8F3;       /* FO page */
  --hsp-limestone-50: #F4EFE6;     /* BO page, table header, sunken */
  --hsp-limestone-100: #ECE5D8;    /* chips, muted surfaces, skeleton, progress track */
  --hsp-sandstone-200: #E0D6C5;    /* decorative borders and dividers only (1.44 on white) */
  --hsp-sandstone-300: #CBBFA9;    /* table rules, disabled borders (decorative) */
  --hsp-stone-400: #A89A83;        /* text on dark only (6.20 on basalt-900) */
  --hsp-stone-500: #8A7E6E;        /* control borders 3.96 white / 3.74 papyrus / 3.46 limestone-50 */
  --hsp-stone-600: #6B6052;        /* muted text 6.14 white; floor 4.90 on limestone-100 */
  --hsp-basalt-700: #4A4238;       /* secondary text 9.87 */
  --hsp-basalt-800: #2E2923;       /* body text 14.40 */
  --hsp-basalt-850: #27221D;       /* sidebar hover */
  --hsp-basalt-900: #1F1B17;       /* headings, sidebar, footer, tooltips 17.10 */

  /* Nile teal (default action ramp; also chart slot 1 and sequential ramp) */
  --hsp-nile-50: #E6F2F1;
  --hsp-nile-100: #C7E3E0;
  --hsp-nile-200: #9CCDC8;         /* links/icons on basalt-900: 9.76 */
  --hsp-nile-500: #00897B;         /* charts only: 4.31 on white */
  --hsp-nile-600: #0E7374;         /* icons, secondary graphics: 5.64 */
  --hsp-nile-700: #0B5E5F;         /* ACTION: white on it 7.55 */
  --hsp-nile-800: #084A4B;         /* hover: 10.04; text on nile-50 8.76 */
  --hsp-nile-900: #06393A;         /* pressed: 12.69 */

  /* Clay / terracotta (brand accent only, never actions or statuses) */
  --hsp-clay-50: #FBEEE8;
  --hsp-clay-100: #F5D9CC;
  --hsp-clay-400: #D0764F;         /* on dark: 5.20 basalt-900, 4.38 basalt-800 (UI) */
  --hsp-clay-500: #C45A33;         /* chart slot 2 */
  --hsp-clay-600: #A5462A;         /* brand text on light: 5.98 white, 5.64 papyrus */
  --hsp-clay-700: #86381F;         /* on clay-50: 7.11 */

  /* Status hues */
  --hsp-lapis-50: #E8EEF9;  --hsp-lapis-500: #4166C2;  --hsp-lapis-600: #2A4F9E;  --hsp-lapis-700: #1E3F86;
  --hsp-green-50: #E5F2E9;  --hsp-green-600: #1C7443;  --hsp-green-700: #17603A;
  --hsp-carnelian-50: #FBEAE7; --hsp-carnelian-600: #B3321F; --hsp-carnelian-700: #9A2A1C;
  --hsp-amethyst-50: #F1EBF8; --hsp-amethyst-500: #8455C9; --hsp-amethyst-600: #6B3FA0; --hsp-amethyst-700: #5B3190;
  --hsp-ochre-50: #FDEEDD;  --hsp-ochre-600: #A34B0B;  --hsp-ochre-700: #8A4108;
  --hsp-gold-50: #FBF3DC;   --hsp-gold-300: #F2C46D;   --hsp-gold-400: #C9A227;  --hsp-gold-600: #7A5A00;  --hsp-gold-700: #6E5200;
  --hsp-rose-500: #C0457E;

  /* ======================================================================
     2. ACCENT (action) AND BRAND RAMPS: the only values the presets swap
     ====================================================================== */

  --hsp-accent-50: var(--hsp-nile-50);
  --hsp-accent-100: var(--hsp-nile-100);
  --hsp-accent-200: var(--hsp-nile-200);
  --hsp-accent-600: var(--hsp-nile-600);
  --hsp-accent-700: var(--hsp-nile-700);
  --hsp-accent-800: var(--hsp-nile-800);
  --hsp-accent-900: var(--hsp-nile-900);

  --hsp-brand-50: var(--hsp-clay-50);
  --hsp-brand-100: var(--hsp-clay-100);
  --hsp-brand-400: var(--hsp-clay-400);
  --hsp-brand-600: var(--hsp-clay-600);
  --hsp-brand-700: var(--hsp-clay-700);

  /* ======================================================================
     3. SEMANTIC COLOUR
     ====================================================================== */

  /* surfaces */
  --hsp-color-page: var(--hsp-papyrus-25);             /* BO overrides to limestone-50 (section 7) */
  --hsp-color-surface: var(--hsp-white);               /* cards on papyrus need border-subtle (1.06:1) */
  --hsp-color-surface-sunken: var(--hsp-limestone-50); /* table header, fact grid, read-only fields */
  --hsp-color-surface-hover: var(--hsp-limestone-50);  /* row and menu hover */
  --hsp-color-surface-muted: var(--hsp-limestone-100); /* chips, skeleton, segmented track, disabled */
  --hsp-color-surface-selected: var(--hsp-accent-50);  /* selected row / chip / calendar range */
  --hsp-color-surface-inverse: var(--hsp-basalt-900);  /* tooltips, toasts, FO footer */
  --hsp-color-surface-brand: var(--hsp-brand-50);      /* group CTA card, party block */

  /* text */
  --hsp-color-text: var(--hsp-basalt-800);
  --hsp-color-text-strong: var(--hsp-basalt-900);
  --hsp-color-text-secondary: var(--hsp-basalt-700);
  --hsp-color-text-muted: var(--hsp-stone-600);        /* lowest text colour allowed */
  --hsp-color-text-disabled: var(--hsp-stone-500);     /* disabled only (exempt) */
  --hsp-color-text-inverse: var(--hsp-white);
  --hsp-color-text-inverse-secondary: var(--hsp-limestone-100); /* 13.65 on basalt-900 */
  --hsp-color-text-inverse-muted: var(--hsp-stone-400);         /* 6.20 on basalt-900 */
  --hsp-color-text-link: var(--hsp-accent-700);
  --hsp-color-text-link-hover: var(--hsp-accent-800);
  --hsp-color-text-link-inverse: var(--hsp-nile-200);
  --hsp-color-text-brand: var(--hsp-brand-600);         /* overlines, brand words */
  --hsp-color-text-selected: var(--hsp-accent-800);     /* text on surface-selected */
  --hsp-color-text-error: var(--hsp-carnelian-700);     /* 7.71 on white */

  /* borders */
  --hsp-color-border-subtle: var(--hsp-sandstone-200);  /* decorative: cards, dividers */
  --hsp-color-border: var(--hsp-sandstone-300);         /* table rules (decorative) */
  --hsp-color-border-control: var(--hsp-stone-500);     /* inputs, selects, chips, steppers (1.4.11) */
  --hsp-color-border-strong: var(--hsp-basalt-700);     /* control hover */
  --hsp-color-border-selected: var(--hsp-accent-700);
  --hsp-color-border-error: var(--hsp-carnelian-600);

  /* actions */
  --hsp-color-action: var(--hsp-accent-700);
  --hsp-color-action-hover: var(--hsp-accent-800);
  --hsp-color-action-active: var(--hsp-accent-900);
  --hsp-color-on-action: var(--hsp-white);
  --hsp-color-action-subtle: var(--hsp-accent-50);      /* tertiary hover, selected chip */
  --hsp-color-action-subtle-hover: var(--hsp-accent-100);
  --hsp-color-danger-action: var(--hsp-carnelian-600);  /* white on it 6.18 */
  --hsp-color-danger-action-hover: var(--hsp-carnelian-700);
  --hsp-color-brand-accent: var(--hsp-brand-600);
  --hsp-color-brand-accent-on-dark: var(--hsp-brand-400);

  /* focus: 2px ring outside a 2px surface-coloured gap */
  --hsp-color-focus: var(--hsp-accent-700);             /* 7.55 on white, 6.59 on limestone-50 */
  --hsp-color-focus-inverse: var(--hsp-gold-300);       /* 10.50 on basalt-900 */
  --hsp-focus-ring: 0 0 0 2px var(--hsp-color-surface), 0 0 0 4px var(--hsp-color-focus);
  --hsp-focus-ring-inset: inset 0 0 0 2px var(--hsp-color-focus);
  --hsp-focus-ring-inverse: 0 0 0 2px var(--hsp-basalt-900), 0 0 0 4px var(--hsp-color-focus-inverse);

  /* overlays */
  --hsp-color-backdrop: rgb(31 27 23 / .5);
  --hsp-color-hero-scrim: rgb(31 27 23 / .65);          /* white text worst case 5.31 */

  /* ======================================================================
     4. STATUS TONES (subtle = fg on bg; strong = white on solid)
     ====================================================================== */

  --hsp-tone-info-fg: var(--hsp-lapis-700);        --hsp-tone-info-bg: var(--hsp-lapis-50);        --hsp-tone-info-solid: var(--hsp-lapis-600);        /* 8.54 / 7.74 */
  --hsp-tone-success-fg: var(--hsp-green-700);     --hsp-tone-success-bg: var(--hsp-green-50);     --hsp-tone-success-solid: var(--hsp-green-600);     /* 6.57 / 5.78 */
  --hsp-tone-neutral-fg: var(--hsp-basalt-700);    --hsp-tone-neutral-bg: var(--hsp-limestone-100); --hsp-tone-neutral-solid: var(--hsp-basalt-700);   /* 7.88 / 9.87 */
  --hsp-tone-danger-fg: var(--hsp-carnelian-700);  --hsp-tone-danger-bg: var(--hsp-carnelian-50);  --hsp-tone-danger-solid: var(--hsp-carnelian-600);  /* 6.62 / 6.18 */
  --hsp-tone-refund-fg: var(--hsp-amethyst-700);   --hsp-tone-refund-bg: var(--hsp-amethyst-50);   --hsp-tone-refund-solid: var(--hsp-amethyst-600);   /* 7.86 / 7.38 */
  --hsp-tone-warning-fg: var(--hsp-ochre-700);     --hsp-tone-warning-bg: var(--hsp-ochre-50);     --hsp-tone-warning-solid: var(--hsp-ochre-600);     /* 6.49 / 5.88 */
  --hsp-tone-pending-fg: var(--hsp-gold-700);      --hsp-tone-pending-bg: var(--hsp-gold-50);      --hsp-tone-pending-solid: var(--hsp-gold-600);      /* 6.60 / 6.38 */
  --hsp-tone-pending-border: var(--hsp-gold-400);  /* 1px dashed, decorative (held state) */
  --hsp-tone-vip-fg: var(--hsp-gold-300);          --hsp-tone-vip-bg: var(--hsp-basalt-900);                                                            /* 10.50 */

  /* ======================================================================
     5. DATA VISUALISATION
     ====================================================================== */

  --hsp-viz-1: #00897B;   /* nile      4.31 on white */
  --hsp-viz-2: #C45A33;   /* clay      4.32 */
  --hsp-viz-3: #4166C2;   /* lapis     5.37 */
  --hsp-viz-4: #C9A227;   /* gold      2.41: ALWAYS with direct labels or table view */
  --hsp-viz-5: #8455C9;   /* amethyst  5.09: line / legend-ordered charts only */
  --hsp-viz-6: #C0457E;   /* rose      4.77: line / legend-ordered charts only */
  --hsp-viz-other: #8A7E6E;
  --hsp-viz-seq-1: #7DBFB7; --hsp-viz-seq-2: #46A69B; --hsp-viz-seq-3: #00897B; --hsp-viz-seq-4: #0B5E5F; --hsp-viz-seq-5: #06393A;
  --hsp-viz-grid: var(--hsp-sandstone-200);
  --hsp-viz-compare: var(--hsp-stone-500);          /* previous period: dashed */

  /* ======================================================================
     6. TYPOGRAPHY
     Google Fonts (one request, both families; unicode-range keeps Latin pages
     from downloading Arabic files):
     https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap
     ====================================================================== */

  --hsp-font-latin: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --hsp-font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", sans-serif;
  --hsp-font-num: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", Arial, sans-serif; /* digits, prices, codes: identical in every language */
  --hsp-font-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace; /* SQL, logs only */
  --hsp-font: var(--hsp-font-latin);

  --hsp-fw-regular: 400;
  --hsp-fw-medium: 500;
  --hsp-fw-semibold: 600;
  --hsp-fw-bold: 700;

  --hsp-ls-heading: -0.01em;   /* Latin headings >= 28px only; 0 in Arabic */
  --hsp-ls-overline: 0.04em;   /* Latin overline only; 0 in Arabic */

  /* FO scale (mobile-first, fluid headings 360 -> 1440) */
  --hsp-fs-display: clamp(3.6rem, 2.8rem + 2.2vw, 5.6rem);  --hsp-lh-display: 1.1;   /* 36-56px, 700, home hero only */
  --hsp-fs-h1: clamp(2.8rem, 2.4rem + 1.1vw, 4rem);         --hsp-lh-h1: 1.15;       /* 28-40px, 600, one per page */
  --hsp-fs-h2: clamp(2.2rem, 2rem + 0.6vw, 3rem);           --hsp-lh-h2: 1.2;        /* 22-30px, 600 */
  --hsp-fs-h3: 2rem;                                        --hsp-lh-h3: 1.3;        /* 20px, 600, card titles */
  --hsp-fs-h4: 1.8rem;                                      --hsp-lh-h4: 1.35;       /* 18px, 600 */
  --hsp-fs-body-lg: 1.8rem;                                 --hsp-lh-body-lg: 1.55;  /* 18px, 400, lead */
  --hsp-fs-body: 1.6rem;                                    --hsp-lh-body: 1.5;      /* 16px, 400, body and inputs */
  --hsp-fs-sm: 1.4rem;                                      --hsp-lh-sm: 1.45;       /* 14px, labels, secondary */
  --hsp-fs-xs: 1.3rem;                                      --hsp-lh-xs: 1.4;        /* 13px, 500, captions, badges, legal: FO floor */
  --hsp-fs-price-lg: 2.4rem;                                --hsp-lh-price: 1.2;     /* 700, --hsp-font-num, tabular */
  --hsp-fs-price-md: 2rem;

  /* BO scale (fixed; desktop-first) */
  --hsp-bo-fs-page: 2.2rem;     --hsp-bo-lh-page: 2.8rem;     /* 600, H1 */
  --hsp-bo-fs-section: 1.8rem;  --hsp-bo-lh-section: 2.4rem;  /* 600 */
  --hsp-bo-fs-panel: 1.6rem;    --hsp-bo-lh-panel: 2.2rem;    /* 600, panel/card/modal titles */
  --hsp-bo-fs-body: 1.4rem;     --hsp-bo-lh-body: 2rem;       /* 400, body, cells, inputs */
  --hsp-bo-fs-label: 1.3rem;    --hsp-bo-lh-label: 1.8rem;    /* 500 labels, tabs; 600 table headers; compact cells */
  --hsp-bo-fs-meta: 1.2rem;     --hsp-bo-lh-meta: 1.6rem;     /* 400/500 meta, badges, timestamps */
  --hsp-bo-fs-kpi: 2.8rem;      --hsp-bo-lh-kpi: 3.2rem;      /* 600, tabular */
  --hsp-bo-fs-kpi-sm: 2rem;     --hsp-bo-lh-kpi-sm: 2.4rem;   /* 600, totals, secondary KPIs */

  --hsp-measure: 68ch;          /* prose line length */

  /* ======================================================================
     7. SPACE, SIZE, LAYOUT
     ====================================================================== */

  --hsp-space-0: 0;
  --hsp-space-half: .2rem;   /* 2px */
  --hsp-space-1: .4rem;      /* 4px */
  --hsp-space-2: .8rem;      /* 8px */
  --hsp-space-3: 1.2rem;     /* 12px */
  --hsp-space-4: 1.6rem;     /* 16px */
  --hsp-space-5: 2rem;       /* 20px */
  --hsp-space-6: 2.4rem;     /* 24px */
  --hsp-space-8: 3.2rem;     /* 32px */
  --hsp-space-10: 4rem;      /* 40px */
  --hsp-space-12: 4.8rem;    /* 48px */
  --hsp-space-16: 6.4rem;    /* 64px */
  --hsp-space-20: 8rem;      /* 80px */
  --hsp-space-24: 9.6rem;    /* 96px */

  /* controls */
  --hsp-bo-control-sm: 3.2rem;   /* filter-row inputs, small buttons, compact */
  --hsp-bo-control-md: 3.6rem;   /* BO default: inputs, selects, buttons */
  --hsp-bo-control-lg: 4rem;     /* login, sticky save bar */
  --hsp-fo-control-md: 4.8rem;   /* FO default */
  --hsp-fo-control-lg: 5.6rem;   /* FO search CTA, mobile booking fields, sticky CTA */
  --hsp-fo-field-xl: 6.4rem;     /* desktop booking-card fields (label + value) */
  --hsp-touch-min: 4.4rem;       /* FO minimum hit area; BO under (pointer: coarse) */
  --hsp-icon-sm: 1.4rem;  --hsp-icon-md: 1.6rem;  --hsp-icon-lg: 2rem;

  /* BO table density (default = 40px rows) */
  --hsp-row-h: 4rem;
  --hsp-cell-pad-block: .8rem;
  --hsp-cell-pad-inline: 1.2rem;
  --hsp-cell-fs: var(--hsp-bo-fs-body);
  --hsp-cell-lh: var(--hsp-bo-lh-body);

  /* layout */
  --hsp-bo-topbar-h: 5.6rem;
  --hsp-bo-sidebar-w: 24.8rem;
  --hsp-bo-sidebar-rail-w: 6.4rem;
  --hsp-bo-pagehead-h: 6.4rem;         /* sticky compact: 4.8rem */
  --hsp-bo-content-pad: 2.4rem;        /* 1.6rem below 1280 */
  --hsp-bo-content-max: 168rem;        /* >= 1920 */
  --hsp-fo-header-h: 7.2rem;           /* 6.4rem below 768 */
  --hsp-fo-container: 120rem;          /* reading pages; 132rem home and results */
  --hsp-fo-container-wide: 132rem;
  --hsp-fo-gutter: 1.6rem;             /* 2.4rem 768-1279, 3.2rem >= 1280 */
  --hsp-field-w-xs: 8rem;              /* numbers, ages */
  --hsp-field-w-sm: 16rem;             /* codes, dates, prices */
  --hsp-field-w-md: 32rem;             /* names, e-mail */
  --hsp-field-w-lg: 56rem;             /* descriptions */

  /* ======================================================================
     8. RADIUS, BORDER, ELEVATION, LAYERS, MOTION
     ====================================================================== */

  --hsp-radius-xs: 4px;     /* checkboxes, skeleton lines */
  --hsp-radius-sm: 6px;     /* BO inputs and buttons */
  --hsp-radius-md: 8px;     /* FO inputs and buttons, BO panels, dropdowns */
  --hsp-radius-lg: 12px;    /* cards, popovers, date picker, FO room cards */
  --hsp-radius-xl: 16px;    /* booking card, modals, sheets (top corners only) */
  --hsp-radius-pill: 999px; /* badges, chips, segmented (FO), steppers */
  --hsp-border-w: 1px;
  --hsp-border-w-strong: 2px; /* selected radio cards only */

  --hsp-shadow-0: none;
  --hsp-shadow-1: 0 1px 2px rgb(31 27 23 / .06), 0 1px 1px rgb(31 27 23 / .04);   /* FO cards, selected segment */
  --hsp-shadow-2: 0 4px 12px rgb(31 27 23 / .08), 0 1px 3px rgb(31 27 23 / .06);  /* menus, sticky bars, hover */
  --hsp-shadow-3: 0 12px 32px rgb(31 27 23 / .12), 0 2px 6px rgb(31 27 23 / .06); /* popovers, pickers, booking card */
  --hsp-shadow-4: 0 24px 64px rgb(31 27 23 / .18);                                 /* modals, drawers, sheets */

  /* z-index: aligned with admin-theme.css and Bootstrap 3 values that exist today */
  --hsp-z-raised: 1;
  --hsp-z-sticky-cell: 5;       /* sticky first/last table column */
  --hsp-z-sticky-thead: 10;     /* sticky table header */
  --hsp-z-action-bar: 480;      /* BO sticky save bar */
  --hsp-z-pagehead: 499;        /* existing .page-head */
  --hsp-z-sidebar: 500;         /* existing #nav-sidebar */
  --hsp-z-flyout: 600;          /* rail flyouts (old fixed #footer value; that footer is removed) */
  --hsp-z-dropdown: 1000;       /* Bootstrap .dropdown-menu, chosen */
  --hsp-z-fo-header: 1020;      /* FO sticky header */
  --hsp-z-topbar: 1030;         /* BO top bar (Bootstrap fixed navbar) */
  --hsp-z-drawer: 1035;         /* off-canvas sidebar, FO filter sheet */
  --hsp-z-backdrop: 1040;       /* Bootstrap .modal-backdrop */
  --hsp-z-modal: 1050;          /* Bootstrap .modal, sheets */
  --hsp-z-popover: 1060;        /* guests popover, menus inside modals */
  --hsp-z-datepicker: 1065;     /* date pickers must work inside modals */
  --hsp-z-tooltip: 1070;
  --hsp-z-toast: 1080;
  --hsp-z-skiplink: 1100;
  --hsp-z-loader: 10000;        /* existing #page-loader */

  --hsp-dur-instant: 80ms;   /* press */
  --hsp-dur-fast: 150ms;     /* hover, colour, focus */
  --hsp-dur-base: 200ms;     /* popovers, menus, tab indicator */
  --hsp-dur-slow: 280ms;     /* drawers, sheets, modals */
  --hsp-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --hsp-ease-enter: cubic-bezier(0, 0, .2, 1);
  --hsp-ease-exit: cubic-bezier(.4, 0, 1, 1);  /* use 0.75x the enter duration */

  /* ======================================================================
     BO SIDEBAR (dark basalt, default)
     ====================================================================== */
  --hsp-sidebar-bg: var(--hsp-basalt-900);
  --hsp-sidebar-border: transparent;
  --hsp-sidebar-fg: var(--hsp-limestone-100);          /* 13.65 */
  --hsp-sidebar-fg-muted: var(--hsp-stone-400);        /* group labels 6.20 */
  --hsp-sidebar-icon: var(--hsp-stone-400);
  --hsp-sidebar-hover-bg: var(--hsp-basalt-850);       /* text 12.57 */
  --hsp-sidebar-active-bg: var(--hsp-basalt-800);
  --hsp-sidebar-active-fg: var(--hsp-white);           /* 14.40 */
  --hsp-sidebar-active-icon: var(--hsp-white);
  --hsp-sidebar-indicator: var(--hsp-brand-400);       /* 3px bar, 4.38 on basalt-800 (UI) */
  --hsp-sidebar-focus: var(--hsp-focus-ring-inverse);
}

/* ------------------------------------------------------------------------
   7. BO context: page colour and density
   ------------------------------------------------------------------------ */
html.hsp-ui-bo {
  --hsp-color-page: var(--hsp-limestone-50);
}
html.hsp-ui-bo[data-hsp-density="compact"] {
  --hsp-row-h: 3.2rem;
  --hsp-cell-pad-block: .4rem;
  --hsp-cell-pad-inline: .8rem;
  --hsp-cell-fs: var(--hsp-bo-fs-label);
  --hsp-cell-lh: var(--hsp-bo-lh-label);
}
html.hsp-ui-bo[data-hsp-density="comfortable"] {
  --hsp-row-h: 4.8rem;
  --hsp-cell-pad-block: 1.2rem;
  --hsp-cell-pad-inline: 1.6rem;
}

/* ------------------------------------------------------------------------
   9. ARABIC (html[lang^="ar"]): own font, +1px body sizes, taller leading,
      no letter-spacing. Headings keep the Latin size, only leading grows.
   ------------------------------------------------------------------------ */
html[lang^="ar"] {
  --hsp-font: var(--hsp-font-arabic);
  --hsp-ls-heading: 0;
  --hsp-ls-overline: 0;

  --hsp-lh-display: 1.35;
  --hsp-lh-h1: 1.4;
  --hsp-lh-h2: 1.45;
  --hsp-lh-h3: 1.5;
  --hsp-lh-h4: 1.55;
  --hsp-fs-body-lg: 1.9rem;  --hsp-lh-body-lg: 1.8;
  --hsp-fs-body: 1.7rem;     --hsp-lh-body: 1.75;
  --hsp-fs-sm: 1.5rem;       --hsp-lh-sm: 1.7;
  --hsp-fs-xs: 1.4rem;       --hsp-lh-xs: 1.6;
  --hsp-lh-price: 1.3;

  --hsp-bo-lh-page: 3.4rem;
  --hsp-bo-lh-section: 3rem;
  --hsp-bo-lh-panel: 2.6rem;
  --hsp-bo-fs-body: 1.5rem;   --hsp-bo-lh-body: 2.4rem;
  --hsp-bo-fs-label: 1.4rem;  --hsp-bo-lh-label: 2.2rem;
  --hsp-bo-fs-meta: 1.3rem;   --hsp-bo-lh-meta: 2rem;    /* Arabic floor: 13px */
  --hsp-bo-lh-kpi: 3.6rem;
  --hsp-bo-lh-kpi-sm: 2.8rem;

  --hsp-measure: 60ch;
}
/* Note: all of these rules sit on the same element (<html>), so derived tokens such as
   --hsp-cell-fs, --hsp-color-action or --hsp-focus-ring resolve against the Arabic, density
   and accent overrides automatically. Never redefine a primitive on a descendant element. */

/* ------------------------------------------------------------------------
   10. ACCENT PRESETS (HSPUI_ACCENT_PRESET). Default = nile (above).
       A custom accent is printed by hspui as an inline <style> after this
       file with the same seven --hsp-accent-* properties, generated and
       contrast-checked in PHP (DESIGN_SYSTEM.md section 4.4).
   ------------------------------------------------------------------------ */
html[data-hsp-accent="lapis"] {       /* royal blue: white on 700 6.48, 800 on 50 7.50 */
  --hsp-accent-50: #E9EEFB;
  --hsp-accent-100: #CED9F6;
  --hsp-accent-200: #A5BAEF;
  --hsp-accent-600: #3A67DB;
  --hsp-accent-700: #1F52D6;
  --hsp-accent-800: #1942AB;
  --hsp-accent-900: #133385;
}
html[data-hsp-accent="ink"] {         /* ink navy: white on 700 14.04, 800 on 50 13.08 */
  --hsp-accent-50: #E8EAED;
  --hsp-accent-100: #CDD1D7;
  --hsp-accent-200: #A3ABB5;
  --hsp-accent-600: #35455D;
  --hsp-accent-700: #1A2C47;
  --hsp-accent-800: #152339;
  --hsp-accent-900: #101B2C;
}

/* ------------------------------------------------------------------------
   11. LIGHT SIDEBAR VARIANT (HSPUI_SIDEBAR_THEME = light)
   ------------------------------------------------------------------------ */
html[data-hsp-sidebar="light"] {
  --hsp-sidebar-bg: var(--hsp-white);
  --hsp-sidebar-border: var(--hsp-sandstone-200);
  --hsp-sidebar-fg: var(--hsp-basalt-700);             /* 9.87 */
  --hsp-sidebar-fg-muted: var(--hsp-stone-600);        /* 6.14 */
  --hsp-sidebar-icon: var(--hsp-stone-600);
  --hsp-sidebar-hover-bg: var(--hsp-limestone-50);
  --hsp-sidebar-active-bg: var(--hsp-accent-50);
  --hsp-sidebar-active-fg: var(--hsp-accent-800);      /* 8.76 nile */
  --hsp-sidebar-active-icon: var(--hsp-accent-700);
  --hsp-sidebar-indicator: var(--hsp-accent-700);
  --hsp-sidebar-focus: var(--hsp-focus-ring);
}

/* ------------------------------------------------------------------------
   13. LOGO PALETTE (owner identity, 2026-09-30: logo and login mockup in
       docs/hospitality/ui/brand/). Decorative brand surfaces only: the FO
       header bar, home hero and footer (fo/36-brand-spirit.css), the BO
       sidebar and login panel. Actions keep the accent, statuses the tones.
       Ratios on --hsp-logo-espresso unless noted.
   ------------------------------------------------------------------------ */
:root {
  --hsp-logo-espresso: #1A1712;        /* ground of the logo and the login panel */
  --hsp-logo-espresso-raised: #221D17;
  --hsp-logo-sand: #E8DFD0;            /* text 13.52 */
  --hsp-logo-sand-strong: #F6EDDC;     /* headings, brand name 15.37 */
  --hsp-logo-sand-muted: #B3A593;      /* secondary text 7.42 */
  --hsp-logo-gold: #D0A762;            /* indicator, overlines, icons 7.98 */
  --hsp-logo-gold-light: #ECCE8A;      /* hover 11.71 */
  --hsp-logo-gold-deep: #A87B43;       /* hairlines on light surfaces (decorative) */
  --hsp-logo-bronze: #815223;          /* prices: 6.63 on white, 6.26 on papyrus */
  --hsp-logo-nile: #2B617C;            /* glow, decorative */
  --hsp-logo-nile-light: #6DA3B2;      /* water lines 6.40 */
  --hsp-logo-band: #F3ECE1;            /* sand band behind a light section */

  --hsp-ls-brand: 0.16em;              /* Latin brand overline (login mockup "STAFF AREA"); 0 in Arabic */
  --hsp-ls-brand-sm: 0.14em;           /* Latin footer headings; 0 in Arabic */
  --hsp-ls-lockup: 0.01em;             /* Latin brand name next to the mark; 0 in Arabic */
  --hsp-ls-label: 0.08em;              /* Latin capital labels (login eyebrow, BO sidebar sections); 0 in Arabic */
}

html[lang^="ar"] {
  --hsp-ls-brand: 0;
  --hsp-ls-brand-sm: 0;
  --hsp-ls-lockup: 0;
  --hsp-ls-label: 0;
}

/* ------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hsp-dur-instant: .01ms;
    --hsp-dur-fast: .01ms;
    --hsp-dur-base: .01ms;
    --hsp-dur-slow: .01ms;
  }
}

/*
 * Breakpoints (constants; use in media / container queries):
 *   360  FO minimum design width
 *   480  sm   large phone
 *   640  BO table -> card fallback (BO is not optimised below 768)
 *   768  md   tablet (Bootstrap 3 sm)
 *   1024 lg   FO desktop layout; BO sidebar rail
 *   1280 xl   BO sidebar expanded, 8/4 grids
 *   1440 2xl  BO all p1-p2 columns, wide layouts
 *   1920 3xl  content capped (BO 1680px, FO container)
 */