/*
 * global.css — Website Marrakech
 * Design tokens, CSS variables, typography, base resets.
 * Loaded on ALL pages.
 * Scoped under :root — no conflicts with Elementor.
 */

/* ──────────────────────────────────────────
   DESIGN TOKENS
────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --wmc-electric:     #FF3BFF;
  --wmc-lime:         #CAFF00;
  --wmc-accent:       #00D4FF;
  --wmc-orange:       #FF6B35;

  /* Neutrals */
  --wmc-ink:          #070710;
  --wmc-ink-mid:      #12121F;
  --wmc-ink-light:    #1E1E30;
  --wmc-white:        #F5F5F0;
  --wmc-white-dim:    rgba(245, 245, 240, 0.65);
  --wmc-white-muted:  rgba(245, 245, 240, 0.35);

  /* Typography */
  --wmc-font-display: 'Syne', sans-serif;
  --wmc-font-body:    'DM Sans', sans-serif;

  /* Font sizes (fluid) */
  --wmc-text-xs:   0.75rem;
  --wmc-text-sm:   0.875rem;
  --wmc-text-base: 1rem;
  --wmc-text-lg:   1.125rem;
  --wmc-text-xl:   1.25rem;
  --wmc-text-2xl:  1.5rem;
  --wmc-text-3xl:  2rem;
  --wmc-text-4xl:  clamp(2rem, 4vw, 3.5rem);
  --wmc-text-hero: clamp(2.8rem, 6vw, 5.5rem);

  /* Spacing */
  --wmc-space-xs:  0.5rem;
  --wmc-space-sm:  1rem;
  --wmc-space-md:  2rem;
  --wmc-space-lg:  4rem;
  --wmc-space-xl:  8rem;

  /* Borders */
  --wmc-radius-sm: 4px;
  --wmc-radius-md: 8px;
  --wmc-radius-lg: 16px;
  --wmc-radius-xl: 24px;
  --wmc-radius-full: 9999px;

  /* Shadows */
  --wmc-shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.2);
  --wmc-shadow-md:  0 12px 40px rgba(0, 0, 0, 0.35);
  --wmc-shadow-lg:  0 24px 70px rgba(0, 0, 0, 0.45);
  --wmc-shadow-electric: 0 12px 40px rgba(255, 59, 255, 0.35);
  --wmc-shadow-lime:     0 12px 40px rgba(202, 255, 0, 0.35);

  /* Transitions */
  --wmc-transition-fast:   0.2s ease;
  --wmc-transition-base:   0.3s ease;
  --wmc-transition-slow:   0.5s ease;

  /* Z-index scale */
  --wmc-z-base:    1;
  --wmc-z-above:   10;
  --wmc-z-nav:     500;
  --wmc-z-modal:   1000;
  --wmc-z-cursor:  2147483647;
}

/* ──────────────────────────────────────────
   BASE RESET
────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--wmc-font-body);
  font-size: var(--wmc-text-base);
  line-height: 1.65;
  color: var(--wmc-white);
  background-color: var(--wmc-ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ──────────────────────────────────────────
   TYPOGRAPHY BASE
────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wmc-font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--wmc-space-sm);
}

p {
  margin-bottom: var(--wmc-space-sm);
  color: var(--wmc-white-dim);
}

a {
  color: var(--wmc-lime);
  text-decoration: none;
  transition: color var(--wmc-transition-fast);
}

a:hover {
  color: var(--wmc-electric);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ──────────────────────────────────────────
   ELEMENTOR OVERRIDES — safe global fixes
────────────────────────────────────────── */
.elementor-section,
.elementor-container {
  position: relative;
}

/* Prevent Elementor from overriding our font */
.elementor-widget-container {
  font-family: var(--wmc-font-body);
}

/* ──────────────────────────────────────────
   REDUCED MOTION — accessibility
────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}