/* Tokens de diseño — único lugar donde viven colores, espacios y tiempos */
:root {
  /* Paleta base (definida por Pergamino). Los --color-* de abajo son alias usados por los componentes. */
  --paper: #FAFAF7;               /* papel artístico blanco natural; la textura le da el grano */
  --sage: #DDE2D1;
  --ink: #25231E;
  --ink-secondary: rgba(37, 35, 30, .68);
  --ink-line: rgba(37, 35, 30, .18);
  --pergamino-yellow: #E9C95A;
  --white-soft: #FFFFFF;          /* papel superpuesto: ficha, etiqueta del preview, etiqueta del logo */

  --color-sage: var(--sage);
  --color-cream: var(--paper);
  /* Papel blanco para pastel / Ingres (250–300 g). Una sola capa global, fija, repetible (300px, sin uniones).
     1) GRANO MEDIO con relieve: ruido suave iluminado con luz rasante (feDiffuseLighting) →
        sombras en los valles y luces en las crestas, como papel real, no ruido plano.
     2) MICROGRANO: poro fino.  3) FIBRA: muy leve, apenas direccional.
     Intensidad muy suave (~2–4 %): primero se ve la ilustración, después el papel.
     Solo grises cálidos neutros (no amarillea). SVG inline, sin imágenes. */
  --textura-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E %3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='3' seed='11' stitchTiles='stitch'/%3E %3CfeDiffuseLighting surfaceScale='1.5' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E %3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .29 0 0 0 0 .27 -3 0 0 0 2.4'/%3E  %3C/filter%3E %3Cfilter id='rh' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='3' seed='11' stitchTiles='stitch'/%3E %3CfeDiffuseLighting surfaceScale='1.5' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E %3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3 0 0 0 -2.4'/%3E %3C/filter%3E %3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='5' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .29 0 0 0 0 .27 0 0 0 2.4 -1.2'/%3E %3C/filter%3E %3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.03 .42' numOctaves='2' seed='3' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .29 0 0 0 0 .27 0 0 0 2 -1.05'/%3E %3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='0.035'/%3E %3Crect width='100%25' height='100%25' filter='url(%23rh)' opacity='0.14'/%3E %3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.025'/%3E %3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.03'/%3E %3C/svg%3E");
  --color-ink: var(--ink);
  /* Amarillo = "Pergamino te está señalando algo": selección, subrayados, firma, CTA principal.
     Nunca grandes superficies ni decoración. */
  --color-yellow: var(--pergamino-yellow);
  --color-yellow-wash: rgba(233, 201, 90, .5);   /* marcador bajo el texto seleccionado */
  /* Secundario MUY escaso: solo microdetalles gráficos (caminos punteados). No es color de texto. */
  --color-violet: #83759B;

  /* Los colores naturales NO son colores de interfaz; vienen de las ilustraciones:
       azul → lago, cielo, mapa · verde → bosque · terracota → edificios, stickers
       rosa → ilustraciones · marrón → tierra, madera (solo como tono de las sombras cálidas)
     Única excepción: prolongar el cielo del hero con su propio color. */
  --color-sky-photo: #79CCFB;     /* borde superior de la ilustración del hero, para prolongar el cielo */

  --color-ink-soft: var(--ink-secondary);
  --color-line: var(--ink-line);
  --color-line-soft: rgba(37, 35, 30, .12);        /* passe-partout, separadores tenues */
  --color-header-solid: rgba(250, 250, 247, .97);

  /* Sombras: cortas, cálidas (tono tierra 51,41,31) y casi imperceptibles. La profundidad la dan papel, línea y escala. */
  --sombra-objeto: drop-shadow(0 1px 0 rgba(51, 41, 31, .2)) drop-shadow(0 5px 6px rgba(51, 41, 31, .14));
  --sombra-papel: 0 1px 3px rgba(51, 41, 31, .14);

  /* Passe-partout: margen de papel alrededor de la página (más estrecho en móvil) */
  --marco: 8px;

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7rem;

  --gutter: 1rem;
  --header-h: 64px;

  --font-display: "Permanent Marker", "Comic Sans MS", cursive;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --font-ui: "Work Sans", system-ui, -apple-system, sans-serif;

  --border-ink: 2px solid var(--color-ink);
  /* bordes "dibujados": irregulares a propósito */
  --radius-hand: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --radius-hand-sm: 14px 6px 16px 5px / 5px 16px 6px 14px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --transition-fast: 250ms var(--ease);
  --transition-normal: 400ms var(--ease);
}