/* ============================================================================
   Sounds & Beauty, design tokens
   ----------------------------------------------------------------------------
   ESTE ES EL ARCHIVO QUE SE REEMPLAZA CUANDO LLEGUE EL DISENO DE ADRIANA.

   Todo el color, la tipografia, el espaciado y los radios del sitio salen de
   aqui. Ningun .html y ningun otro .css tiene un color escrito a mano. Si vas
   a pegar un #hex fuera de este archivo, PARALO: se pone aqui como variable.

   Estado al 2026-09-15: PLACEHOLDER. Ninguno de estos valores viene de la
   identidad visual. Los escogio esta sesion para tener algo que ver.

   La unica regla del brief que si manda sobre cualquier paleta que entre aqui
   es la D5: prohibido un look "all-black, all-white, or grey-only". Tiene que
   traer color de verdad.
   ========================================================================== */

:root {
  /* --- Color, capa cruda ------------------------------------------------- */
  --sb-ink:        #170F2E;   /* violeta muy oscuro. Es el "negro" del sitio, y NO es negro a proposito */
  --sb-ink-soft:   #2B1D4D;
  --sb-ink-muted:  #6B5F86;

  --sb-pink:       #FF5C8A;   /* belleza */
  --sb-pink-dark:  #E03D6D;
  --sb-teal:       #17C3B2;   /* distribucion */
  --sb-teal-dark:  #0F9C8E;
  --sb-amber:      #FFB020;   /* energia, escenario */

  --sb-cream:      #FFF8F5;   /* fondo claro, calido. No es blanco puro */
  --sb-white:      #FFFFFF;
  --sb-line:       #E8DFE4;
  --sb-line-dark:  rgba(255, 255, 255, 0.14);

  /* --- Color, capa semantica --------------------------------------------- */
  /* Usa SIEMPRE estas, no las crudas de arriba. Asi un cambio de paleta se
     hace en un solo lugar y no hay que cazar usos por todo el CSS. */
  --sb-bg:              var(--sb-cream);
  --sb-bg-alt:          var(--sb-white);
  --sb-bg-invert:       var(--sb-ink);
  --sb-text:            var(--sb-ink);
  --sb-text-soft:       var(--sb-ink-muted);
  --sb-text-invert:     var(--sb-cream);
  --sb-text-invert-soft: rgba(255, 248, 245, 0.72);
  --sb-border:          var(--sb-line);
  --sb-border-invert:   var(--sb-line-dark);

  --sb-accent:          var(--sb-pink);
  --sb-accent-dark:     var(--sb-pink-dark);
  --sb-accent-contrast: #FFFFFF;

  --sb-focus:           var(--sb-amber);

  /* Un color por division. Brief A8: "one brand, two services". El color es
     lo unico que las separa, el resto de la interfaz es identica. */
  --sb-division-distribution: var(--sb-teal);
  --sb-division-events:       var(--sb-pink);

  /* --- Tipografia -------------------------------------------------------- */
  --sb-font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --sb-font-body:    "Inter", "Segoe UI", system-ui, sans-serif;

  --sb-weight-body:    400;
  --sb-weight-medium:  500;
  --sb-weight-strong:  600;
  --sb-weight-display: 700;

  /* Escala fluida. El clamp evita tener que escribir media queries de tamano. */
  --sb-text-xs:   0.8125rem;
  --sb-text-sm:   0.9375rem;
  --sb-text-base: 1.0625rem;
  --sb-text-lg:   clamp(1.125rem, 0.4vw + 1.05rem, 1.3125rem);
  --sb-text-xl:   clamp(1.375rem, 0.9vw + 1.2rem, 1.75rem);
  --sb-text-2xl:  clamp(1.75rem, 1.7vw + 1.4rem, 2.5rem);
  --sb-text-3xl:  clamp(2.25rem, 3.2vw + 1.5rem, 3.75rem);
  --sb-text-hero: clamp(2.5rem, 5.2vw + 1.2rem, 5rem);

  --sb-leading-tight: 1.08;
  --sb-leading-snug:  1.28;
  --sb-leading-body:  1.65;

  --sb-tracking-kicker: 0.14em;

  /* --- Espaciado --------------------------------------------------------- */
  --sb-space-1:  0.25rem;
  --sb-space-2:  0.5rem;
  --sb-space-3:  0.75rem;
  --sb-space-4:  1rem;
  --sb-space-5:  1.5rem;
  --sb-space-6:  2rem;
  --sb-space-7:  3rem;
  --sb-space-8:  4rem;
  --sb-space-9:  6rem;

  --sb-section-y: clamp(3.5rem, 7vw, 7rem);
  --sb-gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --sb-maxw:      1180px;
  --sb-maxw-prose: 68ch;

  /* --- Forma ------------------------------------------------------------- */
  --sb-radius-sm:   8px;
  --sb-radius:      14px;
  --sb-radius-lg:   24px;
  --sb-radius-pill: 999px;

  --sb-shadow-sm: 0 1px 2px rgba(23, 15, 46, 0.06),
                  0 2px 8px rgba(23, 15, 46, 0.04);
  --sb-shadow:    0 2px 4px rgba(23, 15, 46, 0.05),
                  0 12px 32px rgba(23, 15, 46, 0.09);
  --sb-shadow-lg: 0 4px 8px rgba(23, 15, 46, 0.06),
                  0 24px 64px rgba(23, 15, 46, 0.14);

  /* --- Movimiento -------------------------------------------------------- */
  --sb-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --sb-dur-fast: 140ms;
  --sb-dur:      240ms;
  --sb-dur-slow: 480ms;

  --sb-header-h: 68px;
}

/* El sitio es claro por diseno. Este bloque existe para que el navegador no
   invierta los colores por su cuenta y para dejar el gancho listo por si
   Adriana entrega una version oscura. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sb-dur-fast: 1ms;
    --sb-dur: 1ms;
    --sb-dur-slow: 1ms;
  }
}