/* hecho por r3k1 */
@layer tokens, base, motion, layout, components, ilustra, portada, paginas;

@property --len { syntax: "<percentage>"; inherits: true; initial-value: 46%; }
@property --x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

@layer tokens {
  :root {
    --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
    --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --muelle: cubic-bezier(.22, 1, .36, 1);
    --lento: cubic-bezier(.16, 1, .3, 1);
    --suave: cubic-bezier(.22, 1, .36, 1);
    --gut: clamp(16px, 5vw, 72px);
    --max: 1320px;
    --cab: 68px;
    --r: 22px;
    --r-s: 12px;
    color-scheme: dark;
    --bg: #0b0907;
    --bg-2: #15110d;
    --bg-3: #1e1914;
    --tinta: #f1e9da;
    --suave-t: #b3a896;
    --tenue: #7d7365;
    --linea: rgb(241 233 218 / .13);
    --oro: #d8ae54;
    --oro-hi: #f4d88f;
    --oro-lo: #9c7428;
    --oro-g: linear-gradient(115deg, #9c7428 0%, #e6c26f 38%, #f8e3a6 50%, #d8ae54 64%, #9c7428 100%);
    --sobre-oro: #1a1206;
    --piel: #d4a98a;
    --capa: #3a3028;
    --sombra: 0 30px 60px -30px rgb(0 0 0 / .8);
    --mancha-1: rgb(216 174 84 / .22);
    --mancha-2: rgb(150 82 40 / .2);
    --mancha-3: rgb(244 216 143 / .1);
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f7f1e7;
    --bg-2: #efe6d7;
    --bg-3: #e6dac6;
    --tinta: #1c1611;
    --suave-t: #5d5245;
    --tenue: #8a7d6c;
    --linea: rgb(28 22 17 / .14);
    --oro: #a87d2a;
    --oro-hi: #c9a04a;
    --oro-lo: #7a5816;
    --oro-g: linear-gradient(115deg, #7a5816 0%, #b88b34 40%, #dcb465 50%, #a87d2a 62%, #7a5816 100%);
    --sobre-oro: #fffaf0;
    --capa: #2b241e;
    --sombra: 0 30px 60px -34px rgb(60 40 10 / .45);
    --mancha-1: rgb(216 174 84 / .3);
    --mancha-2: rgb(214 140 90 / .18);
    --mancha-3: rgb(255 255 255 / .6);
  }
}