/* ============================================================
   UAE PETROLEUM AND LOGISTICS — FONT SYSTEM
   ------------------------------------------------------------
   CUSTOM FONT PLACEHOLDERS
   Drop the real font files into  /assets/fonts/  using the
   exact filenames below and they will load automatically.

     • Otomo Round  ->  headers / "UAE PETROLEUM AND LOGISTICS"
     • Halis R Reg. ->  slogans / body accents

   Until the real files are uploaded, high-quality Google Font
   fallbacks (Baloo 2 / Poppins) approximate the look so the
   site never appears broken.
   ============================================================ */

/* ---- Temporary visual fallbacks (remove once real fonts added) ---- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   OTOMO ROUND  —  used for ALL "UAE PETROLEUM AND LOGISTICS"
   headers and primary display text (always rendered in CAPS).
   ============================================================ */
@font-face {
  font-family: 'Otomo Round';
  src: url('../assets/fonts/OtomoRound.woff2') format('woff2'),
       url('../assets/fonts/OtomoRound.woff')  format('woff'),
       url('../assets/fonts/OtomoRound.ttf')   format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   HALIS R REGULAR  —  used for ALL slogans and refined body copy
   ============================================================ */
@font-face {
  font-family: 'Halis R';
  src: url('../assets/fonts/HalisR-Regular.woff2') format('woff2'),
       url('../assets/fonts/HalisR-Regular.woff')  format('woff'),
       url('../assets/fonts/HalisR-Regular.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
   Global font tokens — referenced everywhere via CSS variables.
   ------------------------------------------------------------ */
:root {
  /* Display / brand headers (Otomo Round, with rounded fallback) */
  --font-display: 'Otomo Round', 'Baloo 2', 'Quicksand', system-ui, sans-serif;
  /* Slogans (Halis R Regular, with clean fallback) */
  --font-slogan:  'Halis R', 'Poppins', system-ui, sans-serif;
  /* General body / UI */
  --font-body:    'Inter', 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* Helper classes */
.font-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.font-slogan  { font-family: var(--font-slogan); }
.brand-name   { font-family: var(--font-display); text-transform: uppercase; }