/* ============================================
   OFERO COLOMBIA — DESIGN SYSTEM
   Tokens extraídos de oferocol.com (tema Pix/Elementor)
   Fuente tipográfica: Manrope
   ============================================ */

:root {
  /* ===== Colores de marca ===== */
  --color-primary: #70d84a;
  --color-primary-hover: #5fc038;
  --color-primary-light: rgba(178, 234, 158, 0.15);
  --color-secondary: #1d1e21;
  --color-secondary-light: rgba(77, 79, 87, 0.15);

  /* ===== Colores funcionales ===== */
  --color-green: #4ed199;
  --color-cyan: #0dd3ff;
  --color-yellow: #ffc168;
  --color-orange: #ff9900;
  --color-red: #ff6c5f;
  --color-blue: #1274e7;
  --color-purple: #4b19f7;

  /* ===== Escala de grises ===== */
  --gray-1: #f8f9fa;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #6c757d;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;

  /* ===== Texto ===== */
  --text-body: #adb5bd;
  --text-heading: #495057;
  --text-heading-hover: #1a1d20;
  --text-muted: #6c757d;
  --text-white: #ffffff;

  /* ===== Background ===== */
  --bg-default: #f8f9fa;
  --bg-white: #ffffff;
  --bg-dark: #1d1e21;

  /* ===== Gradientes ===== */
  --gradient-primary: linear-gradient(to right, #71d84a, #87cf5e, #c4da4b);
  --gradient-primary-light: linear-gradient(to right, rgba(179, 234, 158, 0.15), rgba(194, 230, 173, 0.15), rgba(224, 235, 160, 0.15));

  /* ===== Tipografía ===== */
  --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-body: 16px;
  --font-size-p: 20px;
  --font-size-h4: 20px;
  --font-size-h3: 24px;
  --font-size-h2: 28.8px;
  --font-size-h1: 45px;
  --font-size-display: 56px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.28;
  --line-height-heading: 1.3;
  --line-height-body: 1.8;
  --line-height-p: 1.6;

  --letter-spacing-body: -0.16px;
  --letter-spacing-h1: -0.45px;
  --letter-spacing-h2: -0.288px;

  /* ===== Layout ===== */
  --container-max-width: 1140px;
  --container-padding-x: 16px;

  /* ===== Spacing ===== */
  --space-xs: 0.44rem;    /* 7px */
  --space-sm: 0.67rem;    /* 11px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2.25rem;    /* 36px */
  --space-2xl: 3.38rem;   /* 54px */
  --space-3xl: 5.06rem;   /* 81px */

  /* ===== Bordes y radios ===== */
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-lg: 10px;
  --border-radius-xl: 15px;
  --border-radius-full: 9999px;
  --border-color: #e6e8ea;

  /* ===== Sombras ===== */
  --shadow-sm: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  --shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.03), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.03), 0 1.5rem 2.2rem rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.08), 0 2rem 3rem rgba(0, 0, 0, 0.12);

  /* ===== Transiciones ===== */
  --transition-base: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  --transition-fast: all 0.2s ease;
  --transition-hover: all 0.3s ease;

  /* ===== Header ===== */
  --header-height: 80px;
  --header-bg: #ffffff;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  :root {
    --font-size-h1: 38px;
    --font-size-display: 44px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-display: 36px;
    --font-size-p: 18px;
    --space-3xl: 3.5rem;
    --space-2xl: 2.5rem;
  }
}