/*
 * Al-Hilal Travels — design tokens
 *
 * Generated from the ALHILALTRAVELS Figma file, SYSTEM page (`0:1`),
 * `Foundations / Root` (44:4) and the WEBSITE / Components variable set.
 * Names mirror the Figma variables exactly (`--aht-*`) so a value can be
 * traced back to the design without a lookup table.
 *
 * Do not introduce a colour, size or font here that does not exist in the
 * Figma system. If the design needs one, add it in Figma first.
 */

:root {
  /* ---- Primitives -------------------------------------------------- */
  --aht-primitive-system-ink: #211a1d;
  --aht-primitive-system-paper: #f7f1e8;
  --aht-primitive-system-burgundy: #641c36;
  --aht-primitive-system-oxblood: #3f1023;
  --aht-primitive-system-stone: #d7c9be;
  --aht-primitive-system-taupe: #bda99d;
  --aht-primitive-system-metal-warmth: #b88e73;

  /* Logo artwork colours — never recoloured to the P1 palette. */
  --aht-primitive-logo-burgundy: #970246;
  --aht-primitive-logo-ink: #1c1817;
  --aht-primitive-logo-white: #ffffff;

  /* ---- Semantic colour --------------------------------------------- */
  --aht-color-background-canvas: #f7f1e8;
  --aht-color-background-web-canvas: #f6f6f8;
  --aht-color-background-raised: #ffffff;
  /* AlhilalDesign `2026 Extensions · Surfaces` background/light (sand/50, D13). */
  --aht-color-background-light: #fbf7f4;
  --aht-color-background-subtle: #d7c9be;
  --aht-color-background-soft: #bda99d;
  --aht-color-background-brand: #641c36;
  --aht-color-background-brand-deep: #3f1023;
  --aht-color-background-disabled: #ecebed;

  --aht-color-text-primary: #211a1d;
  --aht-color-text-secondary: #655a60;
  --aht-color-text-brand: #641c36;
  --aht-color-text-on-brand: #ffffff;

  --aht-color-line-primary: #211a1d;
  --aht-color-line-brand: #641c36;
  --aht-color-line-warm: #b88e73;

  --aht-color-border-default: #d7c9be;
  --aht-color-border-strong: #655a60;
  --aht-color-border-focus: #175cd3;
  --aht-color-border-error: #b42318;

  --aht-color-action-primary-default: #641c36;
  --aht-color-action-primary-hover: #3f1023;
  --aht-color-action-primary-pressed: #211a1d;
  --aht-color-action-primary-disabled: #ecebed;
  --aht-color-action-secondary-hover: #f4eaf0;

  --aht-color-logo-burgundy: #970246;
  --aht-color-logo-ink: #1c1817;
  --aht-color-logo-reversed: #ffffff;

  /* ---- Status ------------------------------------------------------- */
  --aht-color-status-success-foreground: #1f6b45;
  --aht-color-status-success-surface: #eaf4ee;
  --aht-color-status-warning-foreground: #8a5a00;
  --aht-color-status-warning-surface: #fff4d6;
  --aht-color-status-info-foreground: #175cd3;
  --aht-color-status-info-surface: #eaf2ff;
  --aht-color-status-error-foreground: #b42318;

  /* ---- Type -------------------------------------------------------- */
  --aht-font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI',
    sans-serif;

  --aht-font-weight-regular: 400;
  --aht-font-weight-semibold: 600;
  --aht-font-weight-bold: 700;

  /* size / line-height / letter-spacing, one triple per Figma text style */
  --aht-type-display-xl-size: 72px;
  --aht-type-display-xl-line: 71px;
  --aht-type-display-xl-tracking: -1.8px;

  --aht-type-display-l-size: 56px;
  --aht-type-display-l-line: 56px;
  --aht-type-display-l-tracking: -1.1px;

  --aht-type-h1-size: 40px;
  --aht-type-h1-line: 43px;
  --aht-type-h1-tracking: -0.4px;

  --aht-type-h2-size: 28px;
  --aht-type-h2-line: 32px;
  --aht-type-h2-tracking: -0.1px;

  --aht-type-h3-size: 22px;
  --aht-type-h3-line: 28px;
  --aht-type-h3-tracking: -0.1px;

  --aht-type-h4-size: 18px;
  --aht-type-h4-line: 24px;
  --aht-type-h4-tracking: 0;

  --aht-type-body-large-size: 20px;
  --aht-type-body-large-line: 29px;

  --aht-type-body-editorial-size: 18px;
  --aht-type-body-editorial-line: 28px;

  --aht-type-body-size: 16px;
  --aht-type-body-line: 24px;

  --aht-type-small-size: 14px;
  --aht-type-small-line: 20px;

  --aht-type-utility-size: 14px;
  --aht-type-utility-line: 18px;

  --aht-type-label-size: 12px;
  --aht-type-label-line: 14px;
  --aht-type-label-tracking: 1.2px;

  --aht-type-data-xl-size: 64px;
  --aht-type-data-xl-line: 63px;
  --aht-type-data-xl-tracking: -1.2px;

  --aht-type-data-l-size: 36px;
  --aht-type-data-l-line: 38px;
  --aht-type-data-l-tracking: -0.3px;

  --aht-type-data-compact-size: 24px;
  --aht-type-data-compact-line: 28px;
  --aht-type-data-compact-tracking: -0.1px;

  /* ---- Space ------------------------------------------------------- */
  --aht-spacing-4: 4px;
  --aht-spacing-8: 8px;
  --aht-spacing-12: 12px;
  --aht-spacing-16: 16px;
  --aht-spacing-20: 20px;
  --aht-spacing-24: 24px;
  --aht-spacing-28: 28px;
  --aht-spacing-32: 32px;
  --aht-spacing-40: 40px;
  --aht-spacing-48: 48px;
  --aht-spacing-56: 56px;
  --aht-spacing-64: 64px;
  --aht-spacing-72: 72px;
  --aht-spacing-88: 88px;
  --aht-spacing-120: 120px;

  --aht-radius-2: 2px;
  --aht-radius-4: 4px;
  --aht-radius-6: 6px;
  --aht-radius-pill: 999px;

  /* ---- Layout ------------------------------------------------------ */
  /* Desktop frames are 1440 wide with a 120px gutter → 1200px content. */
  --aht-layout-content-max: 1200px;
  --aht-layout-gutter-desktop: var(--aht-spacing-120);
  --aht-layout-gutter-tablet: var(--aht-spacing-48);
  --aht-layout-gutter-mobile: var(--aht-spacing-20);
  --aht-layout-header-height: 88px;
  --aht-layout-header-height-mobile: 84px;

  /* Minimum interactive target enforced across the design QA sweeps. */
  --aht-target-min: 44px;

  /* ---- Motion ------------------------------------------------------ */
  --aht-duration-fast: 140ms;
  --aht-duration-base: 240ms;
  --aht-ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
}