/* ============================================================
   OBERLICHT — DESIGN TOKENS
   Fuente de colores: logo oficial (morado / azul / amarillo / negro / gris).
   No usar todos los acentos a la vez en una misma sección.
   ============================================================ */

:root {
  /* ---- Color: base ---- */
  --ink:        #1a1a1e;   /* negro cálido — texto, fondos premium, footer */
  --ink-soft:   #2c2c31;
  --paper:      #f7f5f1;   /* fondo default, no blanco puro */
  --paper-dim:  #efece5;
  --white:      #ffffff;

  /* ---- Color: gris ---- */
  --gray-900:   #2c2c31;
  --gray-600:   #6b6b70;
  --gray-400:   #9d9da3;
  --gray-200:   #d8d6d1;
  --gray-100:   #ece9e3;

  /* ---- Color: acentos de marca ---- */
  --violet:      #7a2e8c;
  --violet-deep: #591f66;
  --violet-tint: #efe1f2;

  --blue:        #1e9fd6;
  --blue-deep:   #146f96;
  --blue-tint:   #dff2fa;

  --yellow:      #f2c215;
  --yellow-deep: #caa000;
  --yellow-tint: #fdf3cd;

  /* ---- Color: semántico ---- */
  --color-text:        var(--ink);
  --color-text-muted:  var(--gray-600);
  --color-bg:          var(--paper);
  --color-bg-alt:      var(--paper-dim);
  --color-bg-dark:     var(--ink);
  --color-text-on-dark: var(--paper);
  --color-link:        var(--blue-deep);
  --color-focus:       var(--blue);
  --color-whatsapp:    #25d366;
  --color-whatsapp-deep: #1da851;

  /* ---- Gradientes de firma (arco del logo) ---- */
  --arc-gradient:        linear-gradient(120deg, var(--violet) 0%, var(--blue) 55%, var(--yellow) 100%);
  --arc-gradient-soft:   linear-gradient(120deg, rgba(122,46,140,.18) 0%, rgba(30,159,214,.14) 55%, rgba(242,194,21,.16) 100%);
  --arc-gradient-dark:   linear-gradient(160deg, #1a1a1e 0%, #2c1633 55%, #14313c 100%);

  /* ---- Tipografía ---- */
  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;

  --fs-2xs:  0.75rem;
  --fs-xs:   0.875rem;
  --fs-sm:   1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  4rem;
  --fs-5xl:  5.5rem;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-normal: 1.55;

  --ls-tight: -0.01em;
  --ls-wide:  0.06em;
  --ls-wider: 0.14em;

  /* ---- Espaciado (base 4px) ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  /* ---- Radios ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Sombra (uso mínimo, sólo elevación real) ---- */
  --shadow-sm: 0 2px 8px rgba(26,26,30,.08);
  --shadow-md: 0 8px 24px rgba(26,26,30,.12);
  --shadow-lg: 0 20px 48px rgba(26,26,30,.18);

  /* ---- Transiciones ---- */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 160ms;
  --dur-med:  320ms;
  --dur-slow: 620ms;

  /* ---- Layout ---- */
  --container-max: 1320px;
  --container-pad: var(--sp-5);
  --header-h: 84px;
  --header-h-scrolled: 64px;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-whatsapp: 90;
  --z-overlay: 200;
}

/* Breakpoints de referencia (usados en media queries a lo largo del CSS):
   480px  – móvil grande
   768px  – tablet
   1024px – laptop
   1280px – desktop
   1536px – desktop grande
*/

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