/* ==========================================================================
   MAWJ | Official Brand Guidelines Design Tokens & Typography System
   ========================================================================== */

/* ── 0. BRAND FACES (Self-Hosted) ───────────────────────────────────────────
   PRIMARY ENGLISH DISPLAY ... Talina DEMO Regular (Hero headlines, Section titles, Wordmark)
   SECONDARY ENGLISH / UI .... Metropolis (Body copy, Subheadings, Nav, Buttons, Forms, UI text)
   PRIMARY ARABIC ............ The Sans (All Arabic-language content sitewide)
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Base Neue';
  src: url('../fonts/BaseNeueTrial-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Base Neue';
  src: url('../fonts/BaseNeueTrial-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Base Neue';
  src: url('../fonts/BaseNeueTrial-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Base Neue';
  src: url('../fonts/BaseNeueTrial-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSans';
  src: url('../fonts/TheSans-5_Plain_TRIAL.woff2') format('woff2'),
       url('../fonts/TheSans-5_Plain_TRIAL.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSans';
  src: url('../fonts/TheSans-6_SemiBold_TRIAL.woff2') format('woff2'),
       url('../fonts/TheSans-6_SemiBold_TRIAL.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSans';
  src: url('../fonts/TheSans-7_Bold_TRIAL.woff2') format('woff2'),
       url('../fonts/TheSans-7_Bold_TRIAL.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── 1. GLOBAL DESIGN TOKENS ────────────────────────────────────────────── */
:root {
  /* Official Brand Palette */
  --oxford-blue:   #002A48;   /* Primary dark: headings on light bg, footer bg, high-contrast text, dark surfaces */
  --midnight-blue: #005487;   /* Primary brand blue: buttons, links, active states, icons, primary CTAs, accents */
  --beau-blue:     #B5CFE0;   /* Light accent blue: secondary bg, hover states, highlights, card bg, dividers */
  --platinum:      #ECE9E0;   /* Warm off-white: main page background, light surfaces */

  /* Compatibility & Semantic Color Mapping */
  --navy-950: #00131F;
  --navy-900: #001A2E;
  --navy-850: #002139;
  --navy-800: var(--oxford-blue);   /* #002A48 Oxford Blue */
  --navy-700: #003558;
  
  --blue-600: var(--midnight-blue); /* #005487 Midnight Blue */
  --blue-500: #0066A2;
  
  --mist-300: var(--beau-blue);     /* #B5CFE0 Beau Blue */
  --mist-200: #D3E3EE;
  
  --sand-100: var(--platinum);      /* #ECE9E0 Platinum — light surfaces only, never text */
  --sand-200: #E2DFD4;
  --white:    #FFFFFF;              /* true white — primary text base sitewide */

  /* Semantic Surfaces */
  --bg:            var(--oxford-blue);
  --bg-deep:       #001C30;
  --surface:       #003357;
  --surface-raise: #003D66;
  --surface-card:  rgba(181, 207, 224, 0.08);
  --surface-sand:  var(--platinum);

  /* Semantic Text Colors — white-based system (opacity carries hierarchy) */
  --text:        #FFFFFF;
  --text-dark:   var(--oxford-blue);
  --text-soft:   rgba(255, 255, 255, .72);
  --text-mute:   rgba(255, 255, 255, .55);
  --accent:      var(--beau-blue);
  --brand-blue:  var(--midnight-blue);

  /* Lines & Dividers */
  --line:        rgba(181, 207, 224, .18);
  --line-strong: rgba(181, 207, 224, .32);
  --line-sand:   rgba(0, 42, 72, .18);
  --divider:     var(--beau-blue);

  /* Glow Pools */
  --glow-blue:   rgba(0, 84, 135, .55);
  --glow-mist:   rgba(181, 207, 224, .22);

  /* Typography Stacks */
  --font-display: 'Base Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Base Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sub:     'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-text:    'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic:  'TheSans', 'Cairo', -apple-system, sans-serif;
  --font:         var(--font-text);

  /* Type Scale */
  --fs-display: clamp(2.35rem, 5.4vw, 4.65rem);
  --fs-h2:      clamp(1.65rem, 3.6vw, 3.1rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.65rem);
  --fs-lede:    clamp(1.05rem, 1.4vw, 1.28rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-label:   .75rem;

  --lh-display: 1.14;
  --lh-h2:      1.16;
  --lh-body:    1.66;

  /* Weight Scale Hierarchy */
  --w-light:  400;
  --w-lede:   500;  /* Metropolis Medium */
  --w-body:   500;  /* Metropolis Medium */
  --w-ui:     500;  /* Metropolis Medium */
  --w-sub:    500;  /* Metropolis Medium */
  --w-label:  500;
  --w-em:     600;  /* SemiBold */
  --w-bold:   700;  /* Base Neue Bold */

  /* Spacing Scale */
  --space-xs: clamp(0.75rem, 1.2vw, 1rem);     /* ~12px - 16px */
  --space-sm: clamp(1.25rem, 2vw, 2rem);       /* ~20px - 32px */
  --space-md: clamp(2.5rem, 4vw, 4rem);        /* ~40px - 64px */
  --space-lg: clamp(4rem, 6.5vw, 6rem);        /* ~64px - 96px */
  --space-xl: clamp(5.5rem, 9.5vw, 8.75rem);   /* ~88px - 140px */

  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 2.5rem; --s-6: 3rem;   --s-8: 4rem;   --s-10: 5rem;
  --s-12: 6rem;  --s-16: 8rem;

  --section-y: var(--space-lg);
  --gutter:    clamp(1.25rem, 4.5vw, 3rem);
  --container: 1240px;

  /* Radii */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* Motion */
  --e-out:   cubic-bezier(.16, 1, .3, 1);
  --e-inout: cubic-bezier(.65, .05, .36, 1);
  --d-fast: .18s; --d-mid: .34s; --d-slow: .6s;
}

/* Arabic typography sitewide */
[lang="ar"], .ar, :lang(ar) {
  font-family: var(--font-arabic);
}

/* ══ WAVE FIELD ═══════════════════════════════════════════════════════════
   Mawj Living Wave Field — continuous, multi-layered, organic flowing lines
   traveling through the entire homepage canvas. Rendered via dynamic canvas
   with scroll-reactive current, multi-harmonic splines, depth hierarchy,
   and section rhythm progression. */
.wavefield {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.wavefield__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}