/* ============================================================
   EventWindows - Design Tokens
   ------------------------------------------------------------------
   Single source of truth for the EventWindows design language.
   Mirrors the approved homepage palette, typography, spacing,
   radii, shadows and motion EXACTLY — nothing is redesigned, the
   values are just centralized into CSS custom properties so the
   whole prototype stays consistent and themeable later.

   Loaded first on every page, before site.css / phase stylesheets.
   ============================================================ */

:root {
  /* ------------------------------------------------------------------
     1. Color palette (brand)
     ------------------------------------------------------------------ */
  --ew-brand-green:   #7CD929;   /* primary CTA green            */
  --ew-brand-lime:    #A3E635;   /* secondary green accent       */
  --ew-brand-emerald: #15803D;   /* deep brand green (links/hover) */
  --ew-brand-dark:    #0F172A;   /* brand dark (slate-900)       */
  --ew-brand-slate:   #1E293B;   /* brand slate (slate-800)      */
  --ew-gradient-start:#D2E042;   /* header/CTA gradient start    */
  --ew-gradient-end:  #65BC4C;   /* header/CTA gradient end      */
  --ew-footer-bg:     #03422F;   /* footer deep green            */

  /* ------------------------------------------------------------------
     2. Neutral palette (Tailwind slate scale, exact values in use)
     ------------------------------------------------------------------ */
  --ew-slate-50:  #F8FAFC;
  --ew-slate-100: #F1F5F9;
  --ew-slate-200: #E2E8F0;
  --ew-slate-300: #CBD5E1;
  --ew-slate-400: #94A3B8;
  --ew-slate-500: #64748B;
  --ew-slate-600: #475569;
  --ew-slate-700: #334155;
  --ew-slate-800: #1E293B;
  --ew-slate-900: #0F172A;
  --ew-slate-950: #020617;

  /* ------------------------------------------------------------------
     3. Typography
     ------------------------------------------------------------------ */
  --ew-font-sans: '"Plus Jakarta Sans"', 'Inter', 'sans-serif';
  --ew-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ew-text-2xs:  0.625rem;   /* 10px - eyebrow/label        */
  --ew-text-xs:   0.75rem;    /* 12px - meta text            */
  --ew-text-sm:   0.875rem;   /* 14px - body secondary       */
  --ew-text-base: 1rem;       /* 16px - body                 */
  --ew-text-lg:   1.125rem;   /* 18px - card title           */
  --ew-text-xl:   1.25rem;    /* 20px - section title        */
  --ew-text-2xl:  1.5rem;     /* 24px - page title           */
  --ew-text-3xl:  1.875rem;   /* 30px - hero secondary       */
  --ew-text-4xl:  2.25rem;    /* 36px - hero title           */

  /* ------------------------------------------------------------------
     4. Spacing scale (0.25rem base, Tailwind-aligned)
     ------------------------------------------------------------------ */
  --ew-space-0:   0;
  --ew-space-0-5: 0.125rem;
  --ew-space-1:   0.25rem;
  --ew-space-1-5: 0.375rem;
  --ew-space-2:   0.5rem;
  --ew-space-2-5: 0.625rem;
  --ew-space-3:   0.75rem;
  --ew-space-3-5: 0.875rem;
  --ew-space-4:   1rem;
  --ew-space-5:   1.25rem;
  --ew-space-6:   1.5rem;
  --ew-space-7:   1.75rem;
  --ew-space-8:   2rem;
  --ew-space-9:   2.25rem;
  --ew-space-10:  2.5rem;
  --ew-space-11:  2.75rem;
  --ew-space-12:  3rem;
  --ew-space-14:  3.5rem;
  --ew-space-16:  4rem;
  --ew-space-20:  5rem;
  --ew-space-24:  6rem;

  /* ------------------------------------------------------------------
     5. Border radius
     ------------------------------------------------------------------ */
  --ew-radius-sm:  0.5rem;    /* rounded-lg  - chips, small controls */
  --ew-radius-md:  0.625rem;  /* rounded-xl  - buttons, inputs      */
  --ew-radius-lg:  0.75rem;   /* rounded-2xl - cards                 */
  --ew-radius-xl:  0.75rem;   /* rounded-2xl - hero cards, modals    */
  --ew-radius-full: 9999px;   /* pill / circle shapes                */

  /* ------------------------------------------------------------------
     6. Shadows (exact values used by the Tailwind config)
     ------------------------------------------------------------------ */
  --ew-shadow-brand: 0 10px 30px -5px rgba(124, 217, 41, 0.25);
  --ew-shadow-card:  0 4px 20px -2px rgba(15, 23, 42, 0.06);
  --ew-shadow-hover: 0 20px 35px -5px rgba(15, 23, 42, 0.12);
  --ew-shadow-dark:  0 10px 25px -5px rgba(15, 23, 42, 0.35);
  --ew-shadow-sidebar: 20px 0 40px -10px rgba(15, 23, 42, 0.15);
  --ew-shadow-modal: 0 25px 60px -12px rgba(15, 23, 42, 0.3);

  /* ------------------------------------------------------------------
     7. Motion
     ------------------------------------------------------------------ */
  --ew-duration-fast: 150ms;
  --ew-duration-base: 250ms;
  --ew-duration-slow: 350ms;
  --ew-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ------------------------------------------------------------------
     8. Z-index scale
     ------------------------------------------------------------------ */
  --ew-z-header:   50;
  --ew-z-modal:    50;
  --ew-z-backdrop: 55;
  --ew-z-drawer:   60;
  --ew-z-toast:    70;
}

/* ============================================================
   Accessibility base
   ============================================================ */

/* Visible focus ring for keyboard users only.
   Mirrors the site's focus:ring color while keeping default
   focusable elements (links, buttons, inputs) discoverable. */
:focus-visible {
  outline: 2px solid var(--ew-brand-emerald);
  outline-offset: 2px;
  border-radius: var(--ew-radius-sm);
}

/* Off-screen helper for icon-only / decorative text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link - first tab stop on every page. Visible on focus. */
.skip-link {
  position: fixed;
  top: var(--ew-space-4);
  left: var(--ew-space-4);
  z-index: calc(var(--ew-z-toast) + 10);
  padding: var(--ew-space-2-5) var(--ew-space-5);
  background: var(--ew-brand-dark);
  color: #ffffff;
  font-size: var(--ew-text-sm);
  font-weight: 800;
  border-radius: var(--ew-radius-full);
  box-shadow: var(--ew-shadow-dark);
  transform: translateY(-300%);
  transition: transform var(--ew-duration-fast) var(--ew-ease-out);
}
.skip-link:focus {
  transform: translateY(0);
}

/* Respect users who prefer reduced motion */
@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;
  }
}