/* ==========================================================================
   Design tokens — Aman Integrated Contracting
   Brand colours sampled from the supplied logo artwork:
     navy  #021b5e   orange  #fd4d02   grey  #6d6d6f
   ========================================================================== */

:root {
  /* Brand */
  --aman-navy: #021b5e;
  --aman-navy-dark: #01103a;
  --aman-navy-mid: #0b2670;
  --aman-orange: #fd4d02;           /* decorative: lines, badges, icons, text on navy */
  --aman-orange-strong: #c43a00;    /* AA-safe: 5.3:1 on white, 4.8:1 on #f4f5f7 — button fills, small orange text */
  --aman-grey: #6d6d6f;

  /* Roles */
  --color-heading: var(--aman-navy);
  --color-body: #5d6270;
  --color-muted: #636877;           /* 5:1 on #f4f5f7 */
  --color-white: #ffffff;
  --color-black: #10131c;
  --color-bg-light: #f4f5f7;
  --color-border: #e1e3e8;
  --color-border-dark: rgba(255, 255, 255, 0.14);
  --color-text-on-dark: rgba(255, 255, 255, 0.74);
  --color-accent: var(--aman-orange-strong);
  --color-accent-on-dark: var(--aman-orange);

  /* Layout */
  --container-width: 1380px;
  --gutter: 24px;
  --page-gutter: 16px;
  --section-spacing: clamp(72px, 9vw, 120px);
  --topbar-height: 46px;
  --header-height: 90px;

  /* Type */
  --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;

  --fs-h1: clamp(2.25rem, 1.35rem + 3.3vw, 4.375rem);   /* 36 → 70px */
  --fs-h2: clamp(1.875rem, 1.3rem + 2vw, 3rem);         /* 30 → 48px */
  --fs-h3: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);    /* 24 → 30px */
  --fs-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);      /* 20 → 24px */
  --fs-h5: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18 → 20px */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.875rem;
  --lh-body: 1.625;
  --lh-heading: 1.15;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 0.35s;

  /* Shape: the design uses no rounded corners */
  --radius: 0;
}

/* From tablet up the page gutter must cover half of Bootstrap's g-5 row gutter (24px) */
@media (min-width: 768px) {
  :root { --page-gutter: 24px; }
}

/* Arabic / RTL: swap the type family; layout uses logical properties throughout. */
html[lang="ar"] {
  --font-primary: var(--font-arabic);
  --lh-heading: 1.35;
}