/* ============================================================
   FEKRA — Design Tokens & Font Declarations
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'Trox';
  src: url('../fonts/Trox-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Noor';
  src: url('../fonts/noor Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Noor';
  src: url('../fonts/noor Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Noor';
  src: url('../fonts/noor Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'NoorBold';
  src: url('../fonts/noor Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
  /* Brand palette */
  --midnight-navy: #03070F;
  --royal-navy:    #071D3D;
  --vision-green:  #01A651;
  --neon-lime:     #01FB1D;
  --arctic-white:  #F8FBFF;

  /* Semantic tokens */
  --bg:        #060d1a;
  --bg-2:      #060E1E;
  --bg-3:      #071D3D;
  --surface:   rgba(255,255,255,0.03);
  --surface-2: rgba(255,255,255,0.06);
  --border:    rgba(255,255,255,0.07);
  --border-green: rgba(1,166,81,0.25);

  --green:  #01A651;
  --lime:   #01FB1D;
  --text:   #F8FBFF;
  --text-2: #8B9AB5;
  --text-3: #445266;

  /* Typography */
  --font-display: 'Trox', 'Noor', sans-serif;
  --font-body:    'Noor', sans-serif;

  /* Shape */
  --radius:    10px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  /* Elevation */
  --shadow-glow: 0 0 48px rgba(1,166,81,0.18);
  --shadow-card: 0 24px 64px rgba(0,0,0,0.45);
}

/* ── Base document ──────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  font-size: 16px;
  direction: rtl;
  overflow-x: hidden;
}