/**
 * MIKA THEME — Global Design Tokens (global-tokens.css)
 *
 * Single source of truth for all CSS custom properties.
 * Every value is extracted from the original main.css.
 * All six Elementor plugin widgets MUST consume these variables;
 * they must NOT redefine raw hex values.
 *
 * These tokens are also editable via the Theme Customizer
 * (see inc/class-mika-theme-customizer.php).
 *
 * @package MikaTheme
 * @since   1.0.0
 */

/* ────────────────────────────────────────────────────────────
   DESIGN TOKEN CONTRACT
   Tokens are declared with both the original variable names
   (--color-*, --font-*, etc.) used throughout the static site
   AND the canonical --mika-* names required by the spec.
   Both sets point to the same values so existing CSS patterns
   from the HTML source continue to work unchanged.
   ──────────────────────────────────────────────────────────── */
:root {

  /* ── COLOR PALETTE ──────────────────────────────────────── */

  /* Primary brand blue — Customizer: Global Colors → Primary */
  --mika-color-primary:      #2F4CFF;
  --color-blue:              var(--mika-color-primary);
  --color-blue-dark:         #1B2FCC;

  /* Secondary / Accent pink */
  --mika-color-secondary:    #FF3E85;
  --color-pink:              var(--mika-color-secondary);

  /* Accent yellow */
  --mika-color-accent:       #FFD400;
  --color-yellow:            var(--mika-color-accent);

  /* Supporting brand colors */
  --color-purple:            #8B5CF6;
  --color-green:             #34C77B;
  --color-orange:            #FF7A3D;

  /* Background — Customizer: Global Colors → Background */
  --mika-color-bg:           #F7F4EE;
  --color-bg:                var(--mika-color-bg);

  /* Alternate background (white sections) */
  --mika-color-bg-alt:       #FFFFFF;

  /* Text / Ink — Customizer: Global Colors → Text */
  --mika-color-text:         #14141A;
  --color-ink:               var(--mika-color-text);
  --color-black:             #0D0D0F;
  --mika-color-text-muted:   #5B5B63;
  --color-gray-600:          var(--mika-color-text-muted);

  /* Borders */
  --mika-color-border:       #D8D5CC;
  --color-gray-300:          var(--mika-color-border);
  --color-gray-100:          #F0EDE6;
  --color-white:             #FFFFFF;

  /* Semantic */
  --color-success:           #34C77B;
  --color-danger:            #FF4757;

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */

  /* Heading font — Customizer: Global Typography → Heading Font */
  --mika-font-heading:       'Sora', sans-serif;
  --font-display:            var(--mika-font-heading);

  /* Navigation menu font — geometric sans-serif (reference design) */
  --mika-font-nav:           'Montserrat', sans-serif;

  /* Script / handwritten accent */
  --font-script:             'Caveat', cursive;

  /* Body font — Customizer: Global Typography → Body Font */
  --mika-font-body:          'Inter', sans-serif;
  --font-body:               var(--mika-font-body);

  /* Font weights */
  --fw-regular:              400;
  --fw-medium:               500;
  --fw-semibold:             600;
  --fw-bold:                 700;
  --fw-extrabold:            800;

  /* Fluid font sizes */
  --text-xs:                 0.75rem;    /* 12px */
  --text-sm:                 0.875rem;   /* 14px */
  --text-base:               1rem;       /* 16px */
  --text-md:                 1.125rem;   /* 18px */
  --text-lg:                 1.25rem;    /* 20px */
  --text-xl:                 1.5rem;     /* 24px */
  --text-2xl:                2rem;       /* 32px */
  --text-3xl:                2.5rem;     /* 40px */
  --text-4xl:                3rem;       /* 48px */
  --text-5xl:                3.75rem;    /* 60px */
  --text-6xl:                4.5rem;     /* 72px */

  /* Line heights */
  --lh-tight:                1.05;
  --lh-snug:                 1.15;
  --lh-normal:               1.5;
  --lh-relaxed:              1.7;

  /* Letter spacing */
  --ls-tight:                -0.02em;
  --ls-normal:                0;
  --ls-wide:                  0.06em;
  --ls-wider:                 0.1em;

  /* ── LAYOUT ─────────────────────────────────────────────── */

  --mika-container-width:    1240px;
  --container-max:           var(--mika-container-width);
  --container-px:            clamp(1.5rem, 4vw, 3rem);

  /* Section spacing */
  --section-py:              clamp(3.5rem, 7vw, 6rem);
  --section-py-sm:           clamp(2rem, 4vw, 3.5rem);

  /* Spacing scale — --mika-space-1 through --mika-space-8 */
  --mika-space-1:            0.25rem;   /* 4px  */
  --mika-space-2:            0.5rem;    /* 8px  */
  --mika-space-3:            0.75rem;   /* 12px */
  --mika-space-4:            1rem;      /* 16px */
  --mika-space-5:            1.5rem;    /* 24px */
  --mika-space-6:            2rem;      /* 32px */
  --mika-space-7:            3rem;      /* 48px */
  --mika-space-8:            4rem;      /* 64px */

  /* ── BORDER RADIUS ──────────────────────────────────────── */

  --mika-radius-sm:          8px;
  --radius-sm:               var(--mika-radius-sm);
  --mika-radius-md:          16px;
  --radius-md:               var(--mika-radius-md);
  --mika-radius-lg:          20px;
  --radius-lg:               var(--mika-radius-lg);
  --radius-xl:               24px;
  --radius-2xl:              32px;
  --radius-pill:             999px;

  /* ── SHADOWS ────────────────────────────────────────────── */

  --mika-shadow-sm:          0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-sm:               var(--mika-shadow-sm);
  --mika-shadow-md:          0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-md:               var(--mika-shadow-md);
  --mika-shadow-lg:          0 24px 48px rgba(0, 0, 0, 0.14);
  --shadow-lg:               var(--mika-shadow-lg);
  --shadow-card:             0 20px 40px rgba(0, 0, 0, 0.08);

  /* ── TRANSITIONS ────────────────────────────────────────── */

  --mika-transition-fast:    150ms ease;
  --transition-fast:         var(--mika-transition-fast);
  --mika-transition-base:    250ms ease;
  --transition-normal:       var(--mika-transition-base);
  --mika-transition-slow:    400ms ease;
  --transition-slow:         var(--mika-transition-slow);

  /* ── Z-INDEX SCALE ──────────────────────────────────────── */

  --z-base:                  1;
  --z-above:                 10;
  --z-nav:                   100;
  --z-modal:                 1000;

  /* ── GLOBAL ANIMATIONS ──────────────────────────────────── */

  /* Keyframe: fade up — shared by all widget scroll-reveal */
  /* Individual widget CSS files reference this via class names */
}

/* ── Shared entrance animation keyframes ─────────────────── */

@keyframes mika-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mika-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mika-scale-in {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mika-slide-down {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mika-float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-10px); }
}

@keyframes mika-float-wiggle {
  0%, 100% { transform: rotate(-2deg) translateY(0);    }
  50%       { transform: rotate(-2deg) translateY(-8px); }
}

@keyframes mika-float-camera {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-6px); }
}

/* ── Scroll-reveal helpers ───────────────────────────────── */

.mika-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.mika-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-fadeInUp {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.anim-fadeInLeft {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.anim-fadeInRight {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.anim-scaleIn {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.anim-slideDown {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.anim-fadeInUp.is-visible,
.anim-fadeInLeft.is-visible,
.anim-fadeInRight.is-visible,
.anim-scaleIn.is-visible,
.anim-slideDown.is-visible,
.elementor-editor-active .mika-reveal,
.elementor-editor-active .anim-fadeInUp,
.elementor-editor-active .anim-fadeInLeft,
.elementor-editor-active .anim-fadeInRight,
.elementor-editor-active .anim-scaleIn,
.elementor-editor-active .anim-slideDown,
.elementor-editor-active .mika-cta-home,
.elementor-editor-active .mika-cta-section-wrap,
.elementor-editor-active .mika-cta-wrap,
.elementor-editor-active .lets-talk-section,
.elementor-editor-active .lets-talk-wrap,
.elementor-editor-active .lets-talk-home,
.elementor-editor-active .mika-cta-banner {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Stagger delays for grid children */
.mika-reveal-stagger > *:nth-child(1) { transition-delay: 0s;     }
.mika-reveal-stagger > *:nth-child(2) { transition-delay: 0.08s;  }
.mika-reveal-stagger > *:nth-child(3) { transition-delay: 0.16s;  }
.mika-reveal-stagger > *:nth-child(4) { transition-delay: 0.24s;  }
.mika-reveal-stagger > *:nth-child(5) { transition-delay: 0.32s;  }
.mika-reveal-stagger > *:nth-child(6) { transition-delay: 0.40s;  }

/* Float helpers used by hero widget */
.anim-float        { animation: mika-float 4s ease-in-out infinite; }
.anim-float-wiggle { animation: mika-float-wiggle 4.5s ease-in-out infinite; }
.anim-float-camera { animation: mika-float-camera 5s ease-in-out infinite; }

/* Reduced motion: kill all animations */
@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;
  }

  .mika-reveal,
  .anim-fadeInUp,
  .anim-fadeInLeft,
  .anim-fadeInRight,
  .anim-scaleIn,
  .anim-slideDown {
    opacity: 1 !important;
    transform: none !important;
  }
}