/* ─────────────────────────────────────────────────────────────────
   Singolare · OS — Design tokens v3
   Composición editorial Biwiser + piel Singolare:
   • Cormorant Garamond (la serif que ellas usan en singolare.cl)
   • DM Sans cálida y geométrica
   • Tinta cálida casi negra · acento teal Singolare · cobre secundario
   ───────────────────────────────────────────────────────────────── */

:root {
  /* — Fondos — */
  --color-bg:           #FAFAF7;   /* crema warm */
  --color-bg-subtle:    #F2EFE8;
  --color-surface:      #FFFFFF;

  /* — Tinta y estructura — */
  --color-ink:          #1F2826;   /* casi negro tibio (no azul frío) */
  --color-body:         #15110F;
  --color-graphite:     #5C534C;   /* warm graphite */
  --color-muted-1:      #5C534C;
  --color-muted-2:      #98908A;
  --color-tenue:        #D9D4CC;
  --color-line:         #E5E0D6;
  --color-line-strong:  #C7C0B4;

  /* — Acentos editoriales — */
  --color-singolare:    #108474;   /* teal Singolare — su color real, ahora primario de marca */
  --color-singolare-soft: #E0EDEA;
  --color-copper:       #A87C5F;   /* cobre Biwiser — secundario cálido */
  --color-copper-soft:  #F1E8DD;
  --color-amber:        #C9A24F;
  --color-forest:       #1F3B2D;
  --color-forest-text:  #2D6B48;
  --color-terracotta:   #B85042;
  --color-terracotta-text: #C85A4C;

  /* — Mapa semántico — */
  --color-pos:          var(--color-forest-text);
  --color-pos-soft:     #E5EDE7;
  --color-neg:          var(--color-terracotta-text);
  --color-neg-soft:     #F4E5E2;
  --color-warn:         var(--color-amber);
  --color-warn-soft:    #F6EAD2;

  /* — Tipografía: Cormorant (serif) + DM Sans (sans) — */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-num:     'DM Sans', ui-monospace, monospace;

  /* — Tamaños (composición editorial mantenida de v2) — */
  --fs-metadata:    10px;
  --fs-eyebrow:     11px;
  --fs-meta:        12px;
  --fs-body:        15px;
  --fs-body-lg:     17px;
  --fs-subtitle:    13px;
  --fs-h3:          22px;
  --fs-headline:    28px;
  --fs-h2:          36px;
  --fs-action:      48px;
  --fs-kpi-strip:   34px;
  --fs-kpi-hero:    96px;
  --fs-display:     60px;

  /* — Espaciado — */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* — Layout — */
  --content-max: 1440px;
  --content-pad-x: 64px;

  /* — Radios — */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* — Pesos — */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
}

@media (max-width: 900px) {
  :root {
    --content-pad-x: 24px;
    --fs-action: 34px;
    --fs-h2: 28px;
    --fs-headline: 22px;
    --fs-display: 38px;
    --fs-kpi-hero: 56px;
    --fs-kpi-strip: 28px;
  }
}