/* ==========================================================
   TOKENS — Atma Siddhi · Neuralab Marketing
   V4 — escala tipografica ampliada · nuevas custom props
   ========================================================== */

:root {
  /* ---- PALETA FAMILIA 1 (60-30-10) ---- */
  --arena:        #F5EBDD; /* 60% · background dominante */
  --violeta:      #9F87D5; /* 30% · acento espiritual principal */
  --dorado:       #D4AF6F; /* 10% · detalles premium · MAX 10% */

  /* ---- SOPORTE ---- */
  --crema-calido: #FAFAF7; /* "blanco" cálido · alternativa a #fff */
  --tierra:       #6B5544; /* tipografía oscura, bordes sutiles */
  --negro-mate:   #1a1a1a; /* texto principal alternativo */
  --blanco:       #ffffff;

  /* ---- ESTADOS ---- */
  --violeta-dark:   #5a4a8a; /* violeta oscuro — para texto sobre bg claro */
  --violeta-mid:    #7a64b8; /* violeta medio transiciones */
  --dorado-dark:    #b8961f;
  --tierra-light:   #a07e77;
  --arena-light:    #fdf6ee; /* arena muy clara para fondos alternados */

  /* ---- ANANDA SHAKTI PATH (rediseño V4) ---- */
  /* Ya NO usa violeta full. Usa gradiente sutil arena + crema + detalles violeta */
  --asp-bg:       #F5EBDD;   /* fondo base arena */
  --asp-bg-dark:  #EFE0CA;   /* arena oscura para gradiente */
  --asp-texto:    #1a1a1a;   /* texto oscuro — alto contraste */
  --asp-h-color:  #5a4a8a;   /* h2/h3 violeta oscuro */
  --asp-dorado:   #D4AF6F;   /* dorado en acentos */

  /* ---- TIPOGRAFÍAS ---- */
  --font-titulos:    'Allura', 'Dancing Script', cursive;
  --font-subtitulos: 'Cormorant Garamond', Georgia, serif;
  --font-texto:      'Lato', 'Helvetica Neue', sans-serif;

  /* ---- ESCALA TIPOGRÁFICA V4 — mobile-first con clamp ---- */
  /* G1: body 17px mobile, 19px desktop */
  --size-body:       clamp(1.0625rem, 2vw, 1.1875rem);
  /* h1: clamp(2.8rem, 6vw, 5rem) */
  --size-h1:         clamp(2.8rem, 6vw, 5rem);
  /* h2: clamp(2.2rem, 4.5vw, 3.6rem) */
  --size-h2:         clamp(2.2rem, 4.5vw, 3.6rem);
  /* h3: clamp(1.6rem, 3vw, 2.2rem) */
  --size-h3:         clamp(1.6rem, 3vw, 2.2rem);
  /* subtítulos nunca menos de 1.15rem */
  --size-subtitle:   clamp(1.15rem, 2.5vw, 1.4rem);
  /* card title mínimo 1.4rem */
  --size-card-title: clamp(1.4rem, 2.5vw, 1.6rem);
  /* card body mínimo 1.05rem */
  --size-card-body:  clamp(1.05rem, 1.8vw, 1.125rem);
  --size-small:      0.9rem;    /* microcopy bajo CTAs */
  --size-caption:    0.8125rem; /* captions / metadatos */
  --size-quote:      clamp(1.6rem, 4vw, 2.8rem);
  /* subtítulo hero/sección mediano */
  --size-subtitle-md: clamp(1.3rem, 2.8vw, 1.75rem);

  --lh-h1:    1.1;
  --lh-h2:    1.2;
  --lh-h3:    1.3;
  --lh-body:  1.7;
  --lh-quote: 1.4;

  /* ---- ESPACIADO (sistema 8pt) ---- */
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* ---- CONTENEDOR ---- */
  --container-max:  1200px;
  --container-wide: 1440px;
  --container-px:   clamp(1rem, 4vw, 3rem);

  /* ---- BORDES ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ---- SOMBRAS ---- */
  --shadow-sm:  0 1px 4px rgba(42,37,32,0.08);
  --shadow-md:  0 4px 16px rgba(42,37,32,0.12);
  --shadow-lg:  0 8px 32px rgba(42,37,32,0.16);
  --shadow-wa:  0 4px 20px rgba(159,135,213,0.4);
  --shadow-gold: 0 0 40px rgba(212,175,111,0.35);

  /* ---- TRANSICIONES ---- */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;

  /* ---- Z-INDEX ---- */
  --z-wa:     100;
  --z-header: 90;
  --z-modal:  200;

  /* ---- GRAIN OVERLAY (G2) ---- */
  /* SVG noise para textura sobre fondos planos — data URI */
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}