/* ==========================================================================
   JoomlaHelpNow — Design Tokens
   Every color, type size, spacing value and shadow used across the site
   is defined here. Nothing below should be hard-coded elsewhere.
   ========================================================================== */

:root {
  /* ---- Color: Neutrals (navy/charcoal text system) -------------------- */
  --navy-950: #0B0E17;   /* highest-contrast headings */
  --navy-900: #10152A;
  --navy-800: #1B2140;   /* primary heading color */
  --navy-700: #2C3358;
  --slate-600: #4B5470;  /* body copy */
  --slate-500: #6B7390;
  --slate-400: #98A0B8;
  --slate-300: #C4C9DA;
  --slate-200: #E1E4EE;  /* borders */
  --slate-100: #EEF0F7;
  --slate-50:  #F7F8FC;
  --white:     #FFFFFF;

  /* ---- Color: Joomla-inspired purple (brand primary) ------------------ */
  --purple-900: #2C1750;
  --purple-800: #3E2170;
  --purple-700: #4E2A85;
  --purple-600: #5F35A0;
  --purple-500: #6D3AAE;  /* primary brand */
  --purple-400: #8B5CC9;
  --purple-300: #B294DE;
  --purple-100: #EDE4F8;
  --purple-50:  #F7F2FC;

  /* ---- Color: Technical accent (status / live / trust) ----------------- */
  --teal-600: #0E8F82;
  --teal-500: #14B8A6;
  --teal-100: #DAF6F1;

  /* ---- Color: Urgency accent (emergency CTAs only, used sparingly) ----- */
  --amber-600: #C2760A;
  --amber-500: #F59E0B;
  --amber-100: #FDECC8;

  /* ---- Color: Semantic ---------------------------------------------- */
  --color-bg: var(--white);
  --color-bg-soft: var(--slate-50);
  --color-bg-tint: var(--purple-50);
  --color-text: var(--slate-600);
  --color-heading: var(--navy-800);
  --color-border: var(--slate-200);
  --color-link: var(--purple-600);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-2xs: 0.75rem;   /* 12px */
  --fs-xs:  0.8125rem; /* 13px */
  --fs-sm:  0.9375rem; /* 15px */
  --fs-base: 1rem;     /* 16px */
  --fs-md:  1.125rem;  /* 18px */
  --fs-lg:  1.375rem;  /* 22px */
  --fs-xl:  1.75rem;   /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 2.875rem;  /* 46px */
  --fs-4xl: 3.5rem;    /* 56px */
  --fs-5xl: 4.25rem;   /* 68px */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Layout ------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: var(--space-6);
  --header-height: 104px;
  --header-height-scrolled: 72px;

  /* ---- Radius --------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Shadow (soft, premium — never harsh) ----------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 21, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 21, 42, 0.07), 0 1px 3px rgba(16, 21, 42, 0.05);
  --shadow-lg: 0 16px 40px rgba(16, 21, 42, 0.10), 0 2px 8px rgba(16, 21, 42, 0.05);
  --shadow-purple: 0 12px 28px rgba(109, 58, 174, 0.24);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  /* ---- Z-index scale --------------------------------------------------- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-mobile-cta: 90;
  --z-overlay: 200;
}

/* Reduced motion: neutralize custom durations globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}