/* ─── @font-face: Madani Arabic ─── */
@font-face {
  font-family: 'Madani Arabic';
  src: url('../fonts/MadaniArabic-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Madani Arabic';
  src: url('../fonts/MadaniArabic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Madani Arabic';
  src: url('../fonts/MadaniArabic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Madani Arabic';
  src: url('../fonts/MadaniArabic-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Backgrounds */
  --bg-primary: #120900;
  --bg-alt: #2A1505;
  --bg-nav: rgba(18, 9, 0, 0.95);
  --bg-card: rgba(42, 21, 5, 0.45);
  --bg-card-hover: rgba(42, 21, 5, 0.65);

  /* Accents */
  --accent: #F0A030;
  --accent-light: #FFD080;
  --accent-dark: #C07818;
  --accent-secondary: #7A8B9A;

  /* Highlight */
  --highlight: #F5E6C8;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #F5E6C8;
  --text-muted: rgba(245, 230, 200, 0.75);

  /* Effects */
  --glow-amber: 0 0 20px rgba(240, 160, 48, 0.4);
  --glow-amber-strong: 0 0 40px rgba(240, 160, 48, 0.6), 0 0 80px rgba(240, 160, 48, 0.2);
  --glow-amber-subtle: 0 0 60px rgba(240, 160, 48, 0.15);
  --border-amber: 2px solid var(--accent);
  --border-amber-subtle: 1px solid rgba(240, 160, 48, 0.15);
  --glass-bg: rgba(18, 9, 0, 0.6);
  --glass-border: rgba(240, 160, 48, 0.12);

  /* Typography */
  --font-display: 'Madani Arabic', 'Jomhuria', sans-serif;
  --font-body: 'Madani Arabic', 'Inter', sans-serif;
  --font-accent: 'Typo Comics', sans-serif;

  /* Spacing */
  --section-pad-y: 50px;
  --section-pad-x: 32px;
  --container-max: 1400px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;
  --gap-2xl: 60px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-med: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}