:root {
  /* Galería serena: blanco, gris pared, azul petróleo profundo (como la referencia) */
  --color-paper: #ffffff;
  --color-wall: #ebecee;
  --color-cream: #f4f4f2;
  --color-ink: #12394a;
  --color-ink-soft: #55707c;
  --color-line: #d9dde0;
  --color-navy: #12394a;
  /* Pistacho para los bloques de color (antes azul marino) */
  --color-block: #c9dba9;
  --color-block-deep: #b5cc8e;
  --color-on-block-soft: #3d5a4a;
  --color-oxide: #12394a;
  --color-oxide-deep: #0c2a37;
  --color-frame-black: #1b1a19;
  --color-frame-oak: #b98f5e;

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-ui: 'Cormorant Garamond', 'Times New Roman', serif;

  --text-xs: 0.85rem;
  --text-sm: 1rem;
  --text-base: 1.12rem;
  --text-lg: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  --text-xl: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
  --text-hero: clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem);

  --track-ui: 0.14em;
  --track-display: 0.01em;

  --gutter: clamp(1rem, 0.4rem + 2.4vw, 2.4rem);
  --space-section: clamp(3.5rem, 2.4rem + 4vw, 6rem);

  --duration-fast: 160ms;
  --duration-normal: 400ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-print: 0 1px 2px rgb(18 57 74 / 0.08), 0 16px 32px -18px rgb(18 57 74 / 0.4);
}