/* Peptivé — Design Tokens
   Fuente: brand_assets/BRAND.md
   Solo custom properties. No hay selectores de elementos aquí. */

:root {

  /* ============================================
     COLOR — Paleta primaria
     ============================================ */
  --ink: #0D0D0D;
  --gold: #B8922A;
  --travertine: #F5F0E8;
  --paper: #FFFFFF;
  --gold-light: #D4AC4A;

  /* ============================================
     COLOR — Escala Ink (estructura y texto)
     ============================================ */
  --ink-100: #0D0D0D;
  --ink-90: #1A1A1A;
  --ink-70: #4A4642;
  --ink-50: #6B6660;
  --ink-30: #9A948E;

  /* ============================================
     COLOR — Escala Gold (acento y firma)
     ============================================ */
  --gold-deep: #8F6E1F;
  --gold-base: #B8922A;
  --gold-light-2: #D4AC4A; /* idéntico a --gold-light; alias de escala */
  --gold-pale: #F7F0E0;

  /* ============================================
     COLOR — Escala Travertine (fondos y superficies)
     ============================================ */
  --travertine-deep: #EDE5D4;
  --travertine-base: #F5F0E8;
  --travertine-light: #FAF8F4;
  --travertine-paper: #FFFFFF;

  /* Nota de revisión: una iteración anterior de la dirección editorial
     probó --petroleo-deep (#244B46) y --sage-mineral (#DFE8E0) como
     acentos secundarios en insights/áreas/cierre de compromiso. Se
     retiraron del balance cromático de la homepage (ver commit de
     "revisión de balance cromático") en favor de --ink como única
     pausa oscura -- ya no quedan referencias a esos dos tokens en el
     CSS, por eso se eliminan aquí en vez de dejarlos sin uso. */

  /* ============================================
     COLOR — Estado (solo materiales técnicos, no UI de marca)
     ============================================ */
  --color-success: #2A9A50;
  --color-warning: #C89428;
  --color-error: #B84440;

  /* ============================================
     TIPOGRAFÍA — Familias
     ============================================ */
  --font-display: 'Cormorant Garamond', serif;   /* logotipo únicamente — Italic */
  --font-editorial: 'Fraunces', serif;             /* titulares editoriales y texto de acompañamiento (dirección Stillwater) */
  --font-body: 'Inter', sans-serif;                /* estructura / UI / body / eyebrows */
  --font-mono: 'JetBrains Mono', monospace;        /* reservado — ya no se usa activamente en sections.css */

  /* ============================================
     TIPOGRAFÍA — Pesos
     ============================================ */
  --weight-display-light: 300;
  --weight-display-regular: 400;
  --weight-display-medium: 500;

  --weight-body-regular: 400;
  --weight-body-medium: 500;
  --weight-body-semibold: 600;
  --weight-body-bold: 700;
  --weight-body-extrabold: 800;

  --weight-mono-regular: 400;
  --weight-mono-medium: 500;

  /* ============================================
     TIPOGRAFÍA — Escala (tamaño / interlineado)
     ============================================ */
  --text-display-xl-size: 96px;
  --text-display-xl-line: 112px;

  --text-display-l-size: 72px;
  --text-display-l-line: 84px;

  /* Fluida: 48px en mobile (idéntico al valor anterior) hasta
     64px en desktop grande (~1440px+). --text-heading-l-line no
     se usa en ningún selector (los titulares Fraunces fijan
     line-height unitless directo), así que queda fija. */
  --text-heading-l-size: clamp(3rem, 2.7rem + 1.5vw, 4rem);
  --text-heading-l-line: 56px;

  /* Fluida: 32px en mobile hasta 44px en desktop grande. La
     line-height fluye en la misma proporción (1.25×) para no
     desalinear los títulos de tarjeta a 2+ líneas. */
  --text-heading-m-size: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  --text-heading-m-line: clamp(2.5rem, 2.125rem + 1.44vw, 3.4375rem);

  /* Cuerpo (Inter) — crecimiento moderado; los max-width en ch
     ya escalan con el tamaño de fuente, así que el largo de
     línea en caracteres se mantiene constante. */
  --text-body-l-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-body-l-line: 28px;

  --text-body-m-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
  --text-body-m-line: 26px;

  --text-label-size: 10px;
  --text-label-line: 14px;

  /* ============================================
     TIPOGRAFÍA — Tracking
     ============================================ */
  --tracking-logo: -0.03em;
  --tracking-label: 0.18em;

  /* ============================================
     ESPACIADO
     (No definido en BRAND.md; escala derivada para uso
     de layout en todo el sistema)
     ============================================ */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
  --s-7: 128px;

  /* Padding vertical de sección — desktop por defecto,
     --s-5 en móvil (ver media query abajo) */
  --space-section-y: var(--s-7);

  /* ============================================
     RADIOS DE BORDE
     (No definidos en BRAND.md; valores mínimos por defecto,
     coherentes con el sistema editorial impreso de Peptivé —
     superficies mayormente planas, sin esquinas pronunciadas)
     ============================================ */
  --r-0: 0;         /* secciones, imágenes contenidas, bandas */
  --r-sm: 4px;      /* botones, inputs, chips */
  --r-md: 12px;     /* card flotante de dato (COA) */
  --r-pill: 999px;  /* solo labels tipo eyebrow */

  /* ============================================
     SOMBRAS
     (UX Uplift — Fase 2: no definidas en BRAND.md; consolida los
     valores ya dominantes -- 17 de 19 box-shadow del proyecto ya
     usaban una de estas 3 combinaciones antes de este token, solo
     escritas a mano en cada archivo. Discreción quiet-luxury: se
     usan poco y con opacidad baja, nunca como efecto decorativo.)
     ============================================ */
  --shadow-sm: 0 4px 20px rgba(13, 13, 13, 0.04);   /* card en reposo */
  --shadow-md: 0 8px 24px rgba(13, 13, 13, 0.12);   /* card elevada / hover / FAB */
  --shadow-lg: 0 20px 60px rgba(13, 13, 13, 0.2);   /* modal / overlay */

}

@media (max-width: 767px) {
  :root {
    --space-section-y: var(--s-5);
  }
}