/* ==========================================================================
   IDEX 2027 design tokens (v2)

   The feeling, derived from the product, not from a metaphor:
   you walk into a hall the size of an airfield with a full-size missile in
   it and a frigate in the water outside, and 167 countries have sent people.
   MONUMENTAL. CONSEQUENTIAL. PRECISE.

   Therefore: dark and cool, photography carries the page, colour stays out of
   the way, type has weight. Nothing decorative.
   ========================================================================== */

/* ---- Self-hosted type. No CDN, no Google Fonts, no default agent faces. ---- */

@font-face {
  font-family: "Clash Display";
  src: url("assets/fonts/ClashDisplay-Variable.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
/* Cairo carries the Arabic. It is what ADNEC's own Arabic site uses, which
   makes it the institutionally correct choice as well as a good one.
   Latin and Arabic are split so the English page never downloads the Arabic. */
@font-face {
  font-family: "Cairo";
  src: url("assets/fonts/Cairo-arabic-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Cairo";
  src: url("assets/fonts/Cairo-arabic-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Cairo";
  src: url("assets/fonts/Cairo-arabic-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:root {

  /* ------------------------------------------------------------------
     COLOUR
     Cool and dark. The emblem is a five-colour object and the photographs
     are full of colour, so the interface stays almost entirely neutral.
     One accent: the UAE flag red, at full saturation, used rarely.
     ------------------------------------------------------------------ */

  --c-base:       #07090D;   /* page ground. Near-black, cool. Not #000. */
  --c-surface:    #0E131B;   /* sections that need to separate from base */
  --c-raised:     #161D28;   /* rows, hover states */
  --c-navy:       #0E1C3A;   /* sampled from the live IDEX site. Theirs. */
  --c-line:       rgba(255,255,255,0.11);
  --c-line-str:   rgba(255,255,255,0.26);

  --c-text:       #F4F6F9;   /* 17.6:1 on base */
  --c-text-2:     #9FADC0;   /* 7.6:1 on base */
  --c-text-3:     #7D8B9F;   /* 5.7:1 on base, 4.9:1 on the raised surfaces
                                it actually sits on. Calibrated against the
                                LIGHTEST ground it is used on, not the darkest. */

  /* UAE flag red. Full saturation on purpose: a muted rust on a warm ground
     is the current default AI palette and reads as generated. A saturated
     national red on near-black reads as a flag. */
  --c-red:        #CE1126;
  --c-red-hot:    #E8172E;
  --c-red-text:   #FF5C68;   /* 5.6:1 on base, for red text at small sizes */
  --c-on-red:     #FFFFFF;   /* 5.7:1 on --c-red */

  /* Light inversion, used for exactly one band so the page has a breath */
  --c-invert:     #EDEFF2;
  --c-invert-txt: #0B0F15;
  --c-invert-t2:  #4C5768;
  --c-invert-ln:  rgba(11,15,21,0.14);

  /* ------------------------------------------------------------------
     TYPE
     Two families. Clash Display for anything large enough to be an object
     on the page; Satoshi for everything you actually read.
     ------------------------------------------------------------------ */

  --f-display: "Clash Display", "Cairo", Georgia, serif;
  --f-body:    "Satoshi", "Cairo", system-ui, sans-serif;
  --f-ar:      "Cairo", "Satoshi", system-ui, sans-serif;

  /* Big jumps, per the design skill: size is the hierarchy tool, not weight. */
  --t-mega:    clamp(3.2rem, 8.2vw, 8.5rem);
  --t-h1:      clamp(2.6rem, 5.4vw, 5rem);
  --t-h2:      clamp(2rem, 3.6vw, 3.25rem);
  --t-h3:      clamp(1.5rem, 2.2vw, 2rem);
  --t-h4:      1.3125rem;
  --t-lead:    clamp(1.0625rem, 1.35vw, 1.25rem);
  --t-body:    1rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-label:   0.75rem;

  --lh-mega:   0.92;
  --lh-head:   1.06;
  --lh-lead:   1.45;
  --lh-body:   1.6;

  --tr-mega:   -0.035em;   /* tight, per the skill: never looser than default */
  --tr-head:   -0.025em;
  --tr-label:  0.14em;

  /* ------------------------------------------------------------------
     SPACE / LAYOUT
     ------------------------------------------------------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px;

  --page-max: 1560px;
  --gut: clamp(20px, 4.2vw, 68px);
  --measure: 62ch;

  --r: 0px;          /* the system is square. Committed, per anti-slop 19. */
  --r-ctl: 2px;

  --dir-end: right;

  --dur: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* RTL: Arabic needs more leading, no tracking, and no uppercase. */
[dir="rtl"] {
  --dir-end: left;
  --f-display: "Cairo", "Clash Display", serif;
  --f-body:    "Cairo", "Satoshi", system-ui, sans-serif;
  --lh-mega:  1.18;
  --lh-head:  1.32;
  --lh-body:  1.9;
  --lh-lead:  1.75;
  --tr-mega:  0;
  --tr-head:  0;
  --tr-label: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}