/*
  TOKENS — Little Mochi Studio (littlemochistudio-web)
  ------------------------------------------------------------
  Ampliado para el hero de Home. Valores portados LITERALES desde
  tokens.css de mochis.app (repo mochistudio-web) — solo las
  variables que usa .hero--home y su sistema de capas (trama,
  mancha, grano). El resto del sistema de tokens de mochis.app
  (día/noche completo, fondos de productos/footer, toggle, escala
  tipográfica completa) NO se porta aquí: se añadirá si/cuando
  haga falta para las secciones siguientes.

  Valores confirmados en la identidad de marca cerrada:
  naranja #FF6B35, tinta #0D0D0D, blanco #FFFFFF, wordmark en Sora
  SemiBold (600).
*/

:root {
  --color-naranja: #FF6B35;
  --color-tinta: #0D0D0D;
  --color-blanco: #FFFFFF;
  --color-menta: #B4F6A3;
  --color-morado: #932BF1;

  /* Canales RGB — solo para poder escribir rgba() con opacidad
     variable en la trama y la mancha del hero. NO son colores
     nuevos: son los hex de arriba descompuestos. */
  --color-morado-rgb: 147, 43, 241;
  --color-menta-rgb: 180, 246, 163;
  --color-mancha-rgb: 255, 107, 53; /* #FF6B35 — mancha del hero, igual en día y noche */

  --font-marca: "Sora", sans-serif;

  /*
    --tracking-cta: sin valor confirmado en la documentación del
    proyecto. NO se inventa un número — de momento sin letter-spacing
    (0) hasta que se confirme el valor real usado en mochis.app.
  */
  --tracking-cta: 0;

  /* Cuerpo de lectura del hero (subtítulo). Paso único de la escala
     Perfect Fourth de mochis.app — se porta solo este paso, no la
     escala completa, hasta que el resto del sitio la necesite. */
  --texto-sub: 1.333rem; /* ≈21px */

  /*
    TRAMA DE PUNTOS DEL HERO — geometría.
    Tamaño de punto AJUSTADO (21/09/2026, decisión de Erika: trama
    más sutil en el hero de la marca paraguas) — un ~30% más
    pequeño que el valor original de mochis.app (5px/3.2px/1.6px).
    Opacidad y máscaras SIN TOCAR — mismo criterio que mochis.app,
    solo cambia el tamaño del punto.
  */
  --trama-paso: 22px;
  --trama-punto-grande: 3.5px;
  --trama-punto-medio: 2.2px;
  --trama-punto-pequeno: 1.1px;

  /*
    MANCHA DEL HERO — el hero de Home es siempre oscuro fijo (sin
    toggle día/noche), así que se porta directamente el valor de
    modo "noche" de mochis.app, tal cual, sin resolver por tema.
  */
  --mancha-opacidad: 0.25;
  --mancha-opacidad-movil: 0.5;
  --mancha-ciclo: 18s;
  --mancha-ciclo-movil: 9s;
  --mancha-ciclo-forma: 11s;

  /* Trama del hero de Home: siempre valores de "noche" de mochis.app
     (menta sobre morado) — no depende de tema, igual que la mancha. */
  --trama-rgb: var(--color-menta-rgb);
  --trama-opacidad-grande: 0.037;
  --trama-opacidad-medio: 0.024;
  --trama-opacidad-pequeno: 0.013;

  /*
    AÑADIDO PARA EL RESTO DE HOME (21/09/2026) — secciones "Dos
    formas de trabajar", "Qué hacemos", "Qué recibes" y CTA final.
    Portado desde lms-home-propuesta.html (mockup aprobado en
    pantalla), renombrado a la convención --color-* del repo real.
  */

  /* Variantes de fondo derivadas del morado/menta ya cerrados —
     no son colores de marca nuevos, son fondos de sección. */
  --color-morado-oscuro: #1a0e2e;
  --color-morado-oscuro-2: #241238;
  --color-menta-suave: #F4FDEF;

  /*
    --color-gris-texto: valor de utilidad para texto secundario
    sobre fondo claro, tomado del mockup. NO forma parte de la
    paleta de marca cerrada (naranja/menta/morado/tinta/blanco) —
    es gris neutro de lectura, como el negro/blanco del sistema.
  */
  --color-gris-texto: #57616b;

  /* Radio de tarjetas y secciones redondeadas (vías, sección oscura). */
  --radio-tarjeta: 20px;

  /* Grano de textura para fondos de sección (claro y oscuro) —
     mismo feTurbulence que mochis.app, aquí en data-URI reutilizable
     como background-image. */
  --grano-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}