/* =============================================================
   VARIABLES — Design tokens for Reverse Soft
   ============================================================= */

:root {
  /* Colors — Brand */
  --color-primary: #1A1A1A;
  --color-primary-dark: #0D0D0D;
  --color-primary-light: #2D2D2D;
  --color-primary-muted: #4A4A4A;

  /* Colors — Accent */
  --color-accent: #94A8BE;
  --color-accent-hover: #6B8BA4;
  --color-accent-light: #EBF1F7;

  /* Colors — Backgrounds */
  --color-bg-dark: #0D0D0D;
  --color-bg-light: #FFFFFF;
  --color-bg-subtle: #F9FAFB;
  --color-bg-warm: #EBF1F7;

  /* Colors — Text */
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: #A3A3A3;
  --color-text-on-light: #1A1A1A;
  --color-text-on-light-muted: #6B7280;

  /* Colors — UI */
  --color-border: #E5E7EB;
  --color-border-dark: #2D2D2D;
  --color-shadow: rgba(0, 0, 0, 0.08);

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --font-size-hero: clamp(2.5rem, 5vw, 4rem);
  --font-size-h2: clamp(1.75rem, 3vw, 2.5rem);
  --font-size-h3: clamp(1.25rem, 2vw, 1.5rem);
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;

  /* Spacing */
  --spacing-section: clamp(4rem, 8vw, 8rem);
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Layout */
  --container-max: 1200px;
  --container-padding: 1.5rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-base: 250ms ease;

  /* Z-index layers */
  --z-header: 100;
  --z-overlay: 50;

  /* Carousel */
  --carousel-slide-height: clamp(320px, 50vw, 500px);
  --carousel-slide-radius: var(--radius-xl);
  --carousel-transition-duration: 400ms;
  --carousel-overlay-start: rgba(26, 26, 26, 0);
  --carousel-overlay-end: rgba(26, 26, 26, 0.75);
  --carousel-arrow-size: 3rem;
  --carousel-arrow-bg: rgba(255, 255, 255, 0.15);
  --carousel-arrow-bg-hover: var(--color-accent);
  --carousel-dot-size: 0.625rem;
  --carousel-dot-gap: var(--spacing-sm);
  --carousel-dot-color: var(--color-border);
  --carousel-dot-color-active: var(--color-accent);

  /* WhatsApp FAB */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1DA851;
  --whatsapp-fab-size: 3.5rem;
  --whatsapp-fab-icon-size: 1.75rem;
  --whatsapp-fab-offset: var(--spacing-lg);
  --whatsapp-fab-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  --whatsapp-fab-shadow-hover: 0 6px 20px rgba(37, 211, 102, 0.55);
  --z-whatsapp-fab: 1000;

  /* Web Services Landing */
  --color-price-old: var(--color-text-on-light-muted);
  --color-price-current: var(--color-text-on-light);
  --color-badge-popular-bg: var(--color-accent);
  --color-badge-popular-text: var(--color-text-on-dark);
  --plan-card-padding: var(--spacing-2xl);
  --plan-card-radius: var(--radius-xl);
  --plan-feature-icon-size: 1rem;
}