/* ═══════════════════════════════════════════════════════════
   LUVA · TOKENS
   Sistema de diseño: color, tipografía, espacio, textura
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta: papel cálido + acentos de tinta y lacre ───────── */
  --paper:        #FBF6EE;   /* crema base */
  --paper-2:      #F4EBDE;   /* crema profundo */
  --paper-3:      #FFFDF9;   /* blanco roto (hoja limpia) */
  --paper-4:      #EDE1D0;   /* sombra de papel */

  --blush:        #F3D6D0;   /* rosa empolvado */
  --blush-deep:   #E5B3AB;
  --blush-2:      #F8E4DE;

  --lavender:     #DCD5F0;
  --lavender-deep:#BDB0E4;
  --lavender-2:   #EAE5F8;

  --peach:        #F8D6B2;
  --peach-deep:   #EDBE8C;
  --peach-2:      #FBE9D6;

  --sage:         #CBDAC4;
  --sage-deep:    #A6C09D;
  --sage-2:       #E2EBDD;

  --ink:          #2B2136;   /* tinta ciruela — color intenso nº1 */
  --ink-2:        #463852;
  --ink-3:        #6E607D;
  --ink-4:        #9A8FA6;

  --seal:         #D8472B;   /* lacre — color intenso nº2 */
  --seal-deep:    #B2351C;   /* variante legible sobre papel claro (AA) */
  --seal-soft:    #F6DDD6;

  /* Verde WhatsApp: el tono comercial (#25D366) no alcanza contraste
     AA con texto blanco, así que usamos el verde profundo oficial. */
  --wa:           #0F7A35;
  --wa-hover:     #0A5F28;

  /* ── Alfa de tinta (sombras y bordes sutiles) ─────────────── */
  --ink-a04: rgba(43,33,54,.04);
  --ink-a06: rgba(43,33,54,.06);
  --ink-a10: rgba(43,33,54,.10);
  --ink-a12: rgba(43,33,54,.12);
  --ink-a15: rgba(43,33,54,.15);
  --ink-a20: rgba(43,33,54,.20);
  --ink-a22: rgba(43,33,54,.22);
  --ink-a35: rgba(43,33,54,.35);
  --ink-a55: rgba(43,33,54,.55);
  --seal-a12: rgba(216,71,43,.12);
  --seal-a25: rgba(216,71,43,.25);

  /* ── Tipografía ───────────────────────────────────────────── */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", "Courier New", monospace;

  /* Escala fluida */
  --fs-display: clamp(3.1rem, 9.4vw, 7.6rem);
  --fs-h1:      clamp(2.6rem, 6.6vw, 5.4rem);
  --fs-h2:      clamp(2.15rem, 4.6vw, 3.9rem);
  --fs-h3:      clamp(1.3rem, 2vw, 1.7rem);
  --fs-lead:    clamp(1.02rem, 1.45vw, 1.22rem);
  --fs-body:    clamp(.97rem, 1.15vw, 1.05rem);
  --fs-sm:      .875rem;
  --fs-xs:      .78rem;
  --fs-label:   .7rem;

  /* ── Espaciado ────────────────────────────────────────────── */
  --shell: 1280px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(5rem, 11vw, 9.5rem);

  /* ── Formas y sombras ─────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px var(--ink-a06), 0 3px 8px -2px var(--ink-a06);
  --sh-2: 0 2px 4px var(--ink-a06), 0 10px 24px -6px var(--ink-a12);
  --sh-3: 0 4px 10px -2px var(--ink-a10), 0 22px 48px -12px var(--ink-a22);
  --sh-4: 0 10px 20px -6px var(--ink-a12), 0 40px 80px -24px var(--ink-a35);
  --sh-seal: 0 6px 18px -4px var(--seal-a25);

  /* ── Movimiento ───────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --ease-soft: cubic-bezier(.4, .14, .3, 1);
  --ease-back: cubic-bezier(.34, 1.42, .52, 1);
  --t-fast: .22s;
  --t-mid: .4s;
  --t-slow: .72s;

  /* ── Texturas (SVG en línea, sin dependencias) ────────────── */
  /* feColorMatrix saturate=0 → grano en escala de grises, sin
     interferencia de color sobre los tonos pastel.               */
  --tex-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --tex-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015 .5' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='.38'/%3E%3C/svg%3E");
  --tex-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.15' fill='%232B2136' fill-opacity='.14'/%3E%3C/svg%3E");
  --tex-hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' patternTransform='rotate(45)' patternUnits='userSpaceOnUse'%3E%3Cline x1='0' y1='0' x2='0' y2='10' stroke='%232B2136' stroke-opacity='.12' stroke-width='2.2'/%3E%3C/svg%3E");
}