/* ============================================================
   BETY · Sistema de marca · Pastel (v2.0)
   Variables raíz, tokens tipográficos y reglas globales base.
   Cargar SIEMPRE antes que el resto de CSS del proyecto.
   ============================================================ */

:root {
  /* ── PALETA PASTEL ── */
  --rosa:        #FFD6E0;
  --rosa-soft:   #FFE8EF;
  --celeste:     #C5E0F0;
  --celeste-soft:#E0EFF8;
  --durazno:     #FFDAB9;
  --durazno-soft:#FFEDD9;
  --lila:        #E5D4F0;
  --lila-soft:   #F0E5F8;
  --crema:       #FFF8F0;
  --crema-mid:   #FAF2E8;

  /* ── VIOLETA · único acento ── */
  --violeta:     #7B4FB5;
  --violeta-d:   #5C3A8E;
  --violeta-l:   #9C7BC9;
  --violeta-soft:#B8A0DB;
  --violeta-bg:  rgba(123, 79, 181, 0.08);

  /* ── TEXTOS ── */
  --texto-o:     #2D2540;
  --texto-m:     #5A5070;
  --texto-l:     #8A82A0;
  --texto-w:     #FFFFFF;
  --borde:       #E8E2F0;

  /* ── TIPOGRAFÍA ── */
  --font-d: 'Fraunces', Georgia, serif;
  --font-b: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-m: 'JetBrains Mono', 'Courier New', monospace;

  /* ── SISTEMA ── */
  --radius-btn:     100px;
  --radius-card:    20px;
  --radius-card-lg: 28px;
  --radius-input:   12px;
}

/* ── Gradientes reutilizables ── */
.gradient-soft {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 214, 224, 0.6), transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(197, 224, 240, 0.6), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 218, 185, 0.7), transparent 60%),
    var(--crema);
}

.gradient-lila {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(229, 212, 240, 0.7), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 214, 224, 0.5), transparent 55%),
    var(--crema);
}

.gradient-cool {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(197, 224, 240, 0.7), transparent 55%),
    radial-gradient(ellipse at 70% 100%, rgba(229, 212, 240, 0.5), transparent 50%),
    var(--crema);
}

/* ── Utilitarios de tipografía del sistema ── */
.juliaMonoLight {
  font-family: var(--font-m);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.myBox {
  font-family: var(--font-d);
  font-weight: 600;
  letter-spacing: -1.5px;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.myBox em,
.myBox .accent {
  font-style: italic;
  color: var(--violeta);
  font-weight: 500;
}