/**
 * Mayolove Theme CSS Variables
 *
 * These variables are prefixed with --mayolove- to avoid conflicts with other styles.
 * They can be used across all Elementor widgets and theme components.
 */

:root {
  /* Colors */
  --mayolove-color-primary: #27398A;
  --mayolove-color-primary-rgb: 39, 57, 138;
  --mayolove-color-primary-gradient-bl-to-tr: linear-gradient(227deg, #3059BA 18.16%, #1F3F8B 81.96%);
  --mayolove-color-secondary: #EBA83C;
  --mayolove-color-secondary-rgb: 235, 168, 60;
  --mayolove-color-white: #ffffff;
  --mayolove-color-black: #000000;
  --mayolove-color-gray: #f8f8f8;
  --mayolove-color-blue: #1F2E6E;

  /* Typography */
  --mayolove-font-family: 'PT Sans', sans-serif;
  --mayolove-font-weight-regular: 400;
  --mayolove-font-weight-bold: 700;

  /* Font Sizes */
  --mayolove-font-size-h1-desktop: 54px;
  --mayolove-font-size-h1-mobile: 36px;
  --mayolove-font-size-h2: 28px;
  --mayolove-font-size-body: 18px;

  /* Max Width */
  --mayolove-max-width: 1110px;

  /* Line Heights */
  --mayolove-line-height-h1: 1;
  --mayolove-line-height-h2: 32px;
  --mayolove-line-height-body: 26px;

  /* Spacing */
  --mayolove-spacing-xs: 10px;
  --mayolove-spacing-sm: 20px;
  --mayolove-spacing-md: 40px;
  --mayolove-spacing-lg: 60px;
  --mayolove-spacing-xl: 80px;

  /* Border Radius */
  --mayolove-border-radius-sm: 6px;
  --mayolove-border-radius-md: 16px;
  --mayolove-border-radius-lg: 24px;

  /* Container Widths */
  --mayolove-container-desktop: 1242px;
  --mayolove-container-mobile: 350px;

  /* Padding */
  --mayolove-padding-desktop-x: 243px;
  --mayolove-padding-mobile-x: 20px;
  --mayolove-padding-card: 24px;

  /* Shadows */
  --mayolove-shadow-button: 2px 2px 14px 0px rgba(0, 0, 0, 0.25);

  /* Overlays */
  --mayolove-overlay-gradient: linear-gradient(rgba(0, 0, 0, 0) 64.156%,
      rgba(0, 0, 0, 0.2) 100%), linear-gradient(237.755deg,
      rgba(0, 0, 0, 0) 37.737%,
      rgba(0, 0, 0, 0.4) 59.877%);
}