/* ================================
   RIFA WORLD CUP 26 — DESIGN TOKENS
   Never hardcode a color/spacing value
   anywhere else. Always reference these.
================================ */
/* Mobile */

.navbar__mobile-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-toggle{
    width:44px;
    height:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
}

.menu-toggle span{
    width:24px;
    height:2px;
    background:#fff;
    border-radius:5px;
}

/* Desktop */

@media(min-width:900px){

    .navbar__mobile-actions{
        display:none;
    }

}
:root {
  /* Color */
  --navy: #06152D;
  --navy-2: #0A2345;
  --navy-footer: #040E1E; /* deliberately darker than page navy — footer only */
  --royal-blue: #145DFF;
  --yellow: #FFD447;
  --yellow-hover: #ffdc66;
  --white: #FFFFFF;
  --gray: #9AA5B1;
  --border: rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fs-hero: 96px;
  --fs-h1: 64px;
  --fs-h2: 48px;
  --fs-h3: 32px;
  --fs-body: 18px;
  --fs-small: 15px;

  /* Spacing scale — pick from this list only */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 120px;
  --space-9: 160px;

    
  /* Radius — one value, no exceptions */
  --radius: 16px;

  /* Shadow — subtle only */
  --shadow: 0 20px 80px rgba(0, 0, 0, 0.18);

  /* Motion */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}