/* ==========================================================================
   TEMA PEARL — Frontend Público SentidoPRO
   Gruponea @jperezantoni

   IMPORTANTE: Este archivo SOLO contiene CSS custom properties y overrides
   tipográficos. NO modifica estructura, layout ni lógica de componentes.
   Se carga DESPUÉS del CSS base. El tema 'default' no carga este archivo.
   ========================================================================== */

/* ─── Variables globales del tema ─── */
:root[data-theme="pearl"],
[data-theme="pearl"] {

  /* Tipografía — familia */
  --theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tipografía — títulos hero / página */
  --theme-title-weight: 300;
  --theme-title-tracking: -0.04em;
  --theme-title-line-height: 1.15;

  /* Tipografía — títulos de sección (h2) */
  --theme-section-title-weight: 300;
  --theme-section-title-tracking: -0.03em;
  --theme-section-title-size: 22px;

  /* Tipografía — eyebrow text (label sobre títulos) */
  --theme-eyebrow-size: 10px;
  --theme-eyebrow-weight: 500;
  --theme-eyebrow-tracking: 0.10em;
  --theme-eyebrow-transform: uppercase;
  --theme-eyebrow-color: var(--color-accent, #006600);

  /* Tipografía — subtítulos de sección */
  --theme-section-sub-weight: 300;
  --theme-section-sub-size: 13px;
  --theme-section-sub-color: #999999;

  /* Tipografía — body / párrafos */
  --theme-body-weight: 300;
  --theme-body-size: 14px;
  --theme-body-line-height: 1.7;
  --theme-body-color: #777777;

  /* Tipografía — nav links */
  --theme-nav-weight: 300;
  --theme-nav-tracking: 0.01em;
  --theme-nav-size: 12px;
  --theme-nav-color: #888888;

  /* Tipografía — logo / brand */
  --theme-brand-weight: 500;
  --theme-brand-tracking: -0.01em;

  /* ─── Botones ─── */

  /* Botón primario */
  --theme-btn-primary-radius: 6px;
  --theme-btn-primary-weight: 500;
  --theme-btn-primary-size: 12px;
  --theme-btn-primary-padding: 9px 20px;
  --theme-btn-primary-tracking: 0;

  /* Botón ghost / secundario */
  --theme-btn-ghost-radius: 6px;
  --theme-btn-ghost-weight: 300;
  --theme-btn-ghost-size: 12px;
  --theme-btn-ghost-padding: 9px 20px;
  --theme-btn-ghost-border: 0.5px solid #dddddd;

  /* Botón CTA en cards */
  --theme-btn-card-radius: 5px;
  --theme-btn-card-weight: 500;
  --theme-btn-card-size: 11px;
  --theme-btn-card-padding: 7px 14px;

  /* ─── Cards de catálogo ─── */
  --theme-card-radius: 10px;
  --theme-card-border: 0.5px solid #e8e8e8;
  --theme-card-bg: #ffffff;
  --theme-card-title-weight: 400;
  --theme-card-title-size: 14px;
  --theme-card-title-tracking: -0.01em;
  --theme-card-title-line-height: 1.3;
  --theme-card-desc-weight: 300;
  --theme-card-desc-size: 12px;
  --theme-card-desc-color: #aaaaaa;
  --theme-card-desc-line-height: 1.55;

  /* ─── Precio en cards ─── */
  --theme-price-currency-weight: 300;
  --theme-price-currency-size: 10px;
  --theme-price-currency-color: #999999;
  --theme-price-amount-weight: 500;
  --theme-price-amount-size: 18px;
  --theme-price-amount-tracking: -0.02em;

  /* ─── Badges / chips de categoría ─── */
  --theme-badge-size: 9px;
  --theme-badge-weight: 500;
  --theme-badge-tracking: 0.08em;
  --theme-badge-transform: uppercase;
  --theme-badge-radius: 3px;
  --theme-badge-padding: 2px 7px;

  /* ─── Sección de servicios ─── */
  --theme-service-card-bg: #fafafa;
  --theme-service-card-border: 0.5px solid #e8e8e8;
  --theme-service-card-radius: 10px;
  --theme-service-icon-radius: 8px;
  --theme-service-title-weight: 400;
  --theme-service-desc-weight: 300;
  --theme-service-link-size: 11px;

  /* ─── Sección de novedades / blog ─── */
  --theme-news-card-radius: 10px;
  --theme-news-card-border: 0.5px solid #e8e8e8;
  --theme-news-title-weight: 400;
  --theme-news-title-tracking: -0.01em;
  --theme-news-excerpt-weight: 300;
  --theme-news-date-weight: 300;
  --theme-news-tag-size: 9px;
  --theme-news-tag-tracking: 0.06em;

  /* ─── Footer ─── */
  --theme-footer-brand-weight: 400;
  --theme-footer-link-weight: 300;
  --theme-footer-copy-weight: 300;
  --theme-footer-border: 0.5px solid #e8e8e8;
}


/* ─── Overrides directos sobre clases existentes ───
   Solo usar cuando las variables no alcanzan.
   Siempre dentro del scope [data-theme="pearl"]        */

[data-theme="pearl"] h1,
[data-theme="pearl"] .hero-title {
  font-weight: var(--theme-title-weight);
  letter-spacing: var(--theme-title-tracking);
  line-height: var(--theme-title-line-height);
}

[data-theme="pearl"] h2,
[data-theme="pearl"] .section-title {
  font-weight: var(--theme-section-title-weight);
  letter-spacing: var(--theme-section-title-tracking);
}

[data-theme="pearl"] .hero-body,
[data-theme="pearl"] .section-description,
[data-theme="pearl"] p {
  font-weight: var(--theme-body-weight);
}

/* Itálica en el hero */
[data-theme="pearl"] .hero-title em {
  font-style: italic;
  font-weight: var(--theme-title-weight);
  color: rgba(255,255,255,0.6);
}

/* Eyebrow text */
[data-theme="pearl"] .eyebrow,
[data-theme="pearl"] .section-eyebrow,
[data-theme="pearl"] .category-label {
  font-size: var(--theme-eyebrow-size);
  font-weight: var(--theme-eyebrow-weight);
  letter-spacing: var(--theme-eyebrow-tracking);
  text-transform: var(--theme-eyebrow-transform);
}

/* Botones primarios — cambiar de pill a rectangular */
[data-theme="pearl"] .btn-primary,
[data-theme="pearl"] [class*="rounded-full"][class*="font-semibold"] {
  border-radius: var(--theme-btn-primary-radius) !important;
  font-weight: var(--theme-btn-primary-weight);
}

/* Cards */
[data-theme="pearl"] .card,
[data-theme="pearl"] [class*="rounded-xl"][class*="border"] {
  border-radius: var(--theme-card-radius);
}

/* Nav links */
[data-theme="pearl"] nav a {
  font-weight: var(--theme-nav-weight);
  letter-spacing: var(--theme-nav-tracking);
}