/* ==========================================================================
   MIDAP — Global Design Tokens
   Edit values in :root to re-theme the entire site from one place.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --color-primary:        #25D366; /* WhatsApp green — CTAs, links, active states, icons */
  --color-primary-dark:   #1DA851; /* hover / active */
  --color-primary-darker: #128C4A; /* pressed */
  --color-primary-light:  #E8FBEF; /* tint backgrounds, badge fills */
  --color-primary-lighter:#F3FEF7; /* section background tint */

  /* ---- Secondary / accent (used sparingly) ---- */
  --color-accent:   #075E54; /* deep teal-green for dark bands */
  --color-accent-2: #FFB020; /* warm highlight, ratings only */

  /* ---- Neutrals / text ---- */
  --color-text:        #0A0A0A; /* body + heading text (near-black, per brand rule) */
  --color-text-muted:  #4B4B4B;
  --color-text-faint:  #7A7A7A;
  --color-text-invert: #FFFFFF;

  --color-border:      #E6E8E6;
  --color-border-dark: rgba(255,255,255,0.14);

  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F7F9F7;
  --color-surface-dark: #0E1512;

  /* ---- Feedback ---- */
  --color-success: #25D366;
  --color-warning: #FFB020;
  --color-error:   #E5484D;

  /* ---- Typography ---- */
  --font-display: 'Sora', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-base:    'Inter', -apple-system, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.1rem, 1.6rem + 2.2vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

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

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ---- Radius & shadow ---- */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(10,10,10,0.06);
  --shadow-md: 0 8px 24px rgba(10,10,10,0.08);
  --shadow-lg: 0 20px 48px rgba(10,10,10,0.14);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --header-h: 76px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms;
  --dur-base: 400ms;
}

/* Respect reduced-motion preference site-wide */
@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;
  }
}