/* ================================================================
   SENXORY SHOP — tokens de diseño compartidos con Senxory
   Origen: Sensoryai/assets/style.css (carpeta de la app; bloque :root, líneas 18-37, y
   fondo/grano, líneas 41-88). Sincronizado a mano o con
   scripts/export-tokens-from-sensory.ps1 — no editar los VALORES
   aquí si lo que quieres es cambiar el color en toda la familia de
   productos: cámbialo primero en Senxory y vuelve a sincronizar.

   IMPORTANTE: los nombres de las variables (--oro, --rosa, etc.) se
   mantienen tal cual aunque el color ya no sea "oro" ni "rosa" —
   es la misma convención que usa Senxory, para que un futuro copy/
   paste de fragmentos entre los dos proyectos no rompa nada.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&display=swap');

:root {
    --bg:            #0d0808;
    --bg-elevado:    #1c1310;
    --bg-tarjeta:    #1c1310;
    --bg-input:      #241713;
    --borde:         #3a2620;
    --texto:         #f3e6d8;
    --texto-tenue:   #b6a094;
    --oro:           #ff5a3c;
    --oro-suave:     #ffab7a;
    --rosa:          #d4a24e;
    --rosa-suave:    #e8c580;
    --verde-ok:      #7cbf6a;
    --rojo-no:       #e2394f;
    --radio:         16px;
    --radio-chico:   9px;
    --sombra:        0 10px 34px rgba(0,0,0,0.55);
    --ease-suave:    cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    position: relative;
    background:
        radial-gradient(ellipse 900px 520px at 50% -10%, rgba(255,90,60,0.13), transparent 60%),
        radial-gradient(ellipse 700px 600px at 100% 100%, rgba(212,162,78,0.07), transparent 65%),
        radial-gradient(ellipse 600px 460px at 0% 55%, rgba(255,90,60,0.05), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    line-height: 1.5;
}

/* Grano de fondo sutil — textura de vela/película, no de pantalla */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .display {
    font-family: 'Fraunces', Georgia, serif;
}