/* ============================================
   SKINBLOOM · Sistema de identidad
   Paleta oficial definida en el brief de marca
   ============================================ */

:root {
  /* Paleta principal */
  --color-ivory: #FAF6F1;
  --color-white: #FFFDFC;
  --color-ink: #2A2622;
  --color-text-soft: #736A60;
  --color-champagne: #A8865C;
  --color-champagne-light: #C9AE84;
  --color-petal: #F3C6CC;
  --color-cherry: #E39AA4;
  --color-celadon: #C7D6CB;
  --color-celadon-deep: #8FB0A0;

  /* Variante fresca — secciones clínicas */
  --color-white-cold: #FCFDFB;
  --color-mist-green: #DCE8E1;
  --color-charcoal: #292D2B;
  --color-nude-pink: #EED8D8;

  /* Tipografía */
  --font-display: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --font-heading: 'Marcellus', 'Palatino Linotype', 'Georgia', serif;
  --font-body: 'Jost', 'Futura', 'Century Gothic', 'Segoe UI', sans-serif;

  /* Escala tipográfica fluida */
  --fs-h1: clamp(3rem, 7vw, 6.8rem);
  --fs-h2: clamp(2.2rem, 5vw, 4.5rem);
  --fs-h3: clamp(1.5rem, 3vw, 2.5rem);
  --fs-h4: clamp(1.15rem, 2vw, 1.5rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.78rem;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: 4rem;
  --space-xl: clamp(4rem, 10vw, 8rem);
  --space-section: clamp(4.5rem, 12vw, 9rem);

  /* Layout */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 780px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Bordes y radios: contención editorial */
  --radius-s: 3px;
  --radius-m: 6px;
  --border-hairline: 1px solid rgba(42, 38, 34, 0.12);
  --border-champagne: 1px solid rgba(168, 134, 92, 0.35);

  /* Sombras mínimas */
  --shadow-soft: 0 2px 24px rgba(42, 38, 34, 0.06);
  --shadow-card: 0 4px 32px rgba(42, 38, 34, 0.08);

  /* Movimiento */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 250ms;
  --dur-base: 420ms;
  --dur-slow: 700ms;

  /* Header */
  --header-h: 92px;
  --header-h-compact: 68px;

  /* Vidrio */
  --glass-bg: rgba(250, 246, 241, 0.82);
  --glass-blur: saturate(140%) blur(14px);
}