/*
 * Setvia Marketing — Tokens especificos del marketing site
 * Importa brand-tokens.css y define sobreescrituras/extensiones propias del marketing site.
 * Nunca va al SaaS plugin.
 */

@import url("brand-tokens.css");

:root {
  /* === COLORES DE SUPERFICIE (semi-transparentes para respirar sobre la pista) === */
  --svm-color-bg:         rgba(255, 250, 244, 0.84);  /* warm white tardeo */
  --svm-color-bg-alt:     rgba(246, 240, 228, 0.80);  /* slightly warmer alt */
  --svm-color-bg-dark:    #0a0f1e;
  --svm-color-surface:    #ffffff;                     /* cards: sólidas */
  --svm-color-border:     #e2e8f0;
  --svm-color-border-soft:#f1f5f9;

  /* === TEXTO === */
  --svm-color-text:         #0f172a;
  --svm-color-text-muted:   #475569;
  --svm-color-text-subtle:  #94a3b8;
  --svm-color-text-inverse: #ffffff;
  --svm-color-text-on-dark: #e2e8f0;

  /* === ESPACIADO (marketing usa escala mas generosa que el SaaS) === */
  --svm-space-1:  4px;
  --svm-space-2:  8px;
  --svm-space-3:  12px;
  --svm-space-4:  16px;
  --svm-space-5:  20px;
  --svm-space-6:  24px;
  --svm-space-8:  32px;
  --svm-space-10: 40px;
  --svm-space-12: 48px;
  --svm-space-16: 64px;
  --svm-space-20: 80px;
  --svm-space-24: 96px;
  --svm-space-32: 128px;
  --svm-space-40: 160px;

  /* === SOMBRAS === */
  --svm-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
  --svm-shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
  --svm-shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.07), 0 4px 6px rgba(15, 23, 42, 0.04);
  --svm-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.1), 0 8px 16px rgba(15, 23, 42, 0.06);

  /* === LAYOUT === */
  --svm-container-sm:  640px;
  --svm-container-md:  768px;
  --svm-container-lg:  1024px;
  --svm-container-xl:  1280px;
  --svm-container-2xl: 1440px;

  /* Padding lateral de secciones */
  --svm-section-px:     clamp(var(--svm-space-4), 5vw, var(--svm-space-16));
  --svm-section-py:     clamp(var(--svm-space-16), 8vw, var(--svm-space-40));
  --svm-section-py-sm:  clamp(var(--svm-space-10), 5vw, var(--svm-space-20));

  /* === FOCUS === */
  --svm-focus-ring: 0 0 0 3px rgba(200, 224, 74, 0.36);
}