/* ============================================================
   VIGÍA · design tokens  —  «El clima de tu casa, cuidado»
   Warm · light · editorial (planka Alisio) · lead-gen.
   Base crema/arena/hueso · aqua fresco (aire limpio) ·
   terracota/ámbar cálido (CTA) · tinta cálida oscura.
   NO dark theme. NO abstract graphics.
   ============================================================ */

@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/Fraunces-variable.ttf') format('truetype');
  font-weight:100 900; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'Hanken Grotesk';
  src:url('/assets/fonts/HankenGrotesk-variable.ttf') format('truetype');
  font-weight:100 900; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight:400; font-display:swap; font-style:normal;
}

:root{
  /* ---- warm light palette ---- */
  --bone:      #FBF9F4;   /* lightest paper */
  --cream:     #F4F1EA;   /* base */
  --sand:      #EAE3D5;   /* panels */
  --sand-deep: #E0D7C4;   /* borders / hover surfaces */
  --sand-warm: #F0E7D6;   /* warm tint panel */

  /* ---- ink / text (warm dark, never pure black) ---- */
  --ink:       #2A2620;   /* headings / primary text */
  --ink-soft:  #453F35;   /* secondary strong text */
  --ink-mut:   #5C5546;   /* muted body */
  --ink-faint: #8C846F;   /* captions / labels */

  /* ---- accents ---- */
  --aqua:      #3E9B93;   /* fresh aqua — clean air / health (dosed) */
  --aqua-deep: #2E7B74;   /* aqua text/contrast */
  --aqua-soft: #E4F0EE;   /* aqua tint bg */
  --terra:     #C25A3C;   /* terracotta — CTA / warmth */
  --terra-deep:#A8492E;   /* terracotta pressed */
  --terra-soft:#F6E7DC;   /* terracotta tint bg */
  --amber:     #D98A3D;   /* warm amber — stars / small accents */
  --wa:        #C25A3C;   /* WhatsApp CTA uses brand terracotta (cohesive) */
  --wa-deep:   #A8492E;

  /* ---- lines ---- */
  --line:      rgba(42,38,32,.12);
  --line-soft: rgba(42,38,32,.08);
  --line-strong: rgba(42,38,32,.18);

  /* ---- fonts ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- fluid type scale ---- */
  --t-display:   clamp(2.55rem, 1.5rem + 4.6vw, 5rem);
  --t-h2:        clamp(1.85rem, 1.3rem + 2.3vw, 2.9rem);
  --t-h3:        clamp(1.2rem, 1.02rem + .7vw, 1.55rem);
  --t-lede:      clamp(1.08rem, .98rem + .42vw, 1.3rem);
  --t-body:      1.0625rem;
  --t-sm:        .925rem;
  --t-xs:        .82rem;
  --t-mono:      .74rem;

  /* ---- spacing (4pt) ---- */
  --s-2xs:.375rem; --s-xs:.625rem; --s-sm:.875rem; --s-md:1.25rem;
  --s-lg:1.75rem;  --s-xl:2.5rem;  --s-2xl:3.5rem;  --s-3xl:5rem;
  --s-4xl:7rem;    --s-5xl:9.5rem;

  /* ---- layout ---- */
  --container:      72rem;
  --container-wide: 80rem;
  --container-text: 44rem;

  /* ---- radii ---- */
  --r-sm: 9px;  --r: 14px;  --r-lg: 22px;  --r-xl: 30px;  --r-pill: 999px;

  /* ---- soft warm shadows ---- */
  --sh-sm: 0 1px 2px rgba(74,56,34,.05), 0 2px 8px rgba(74,56,34,.05);
  --sh-md: 0 4px 14px rgba(74,56,34,.07), 0 14px 34px rgba(74,56,34,.07);
  --sh-lg: 0 10px 30px rgba(74,56,34,.10), 0 26px 60px rgba(74,56,34,.10);
  --sh-cta:0 6px 18px rgba(168,73,46,.28);

  /* ---- motion (calm, editorial) ---- */
  --dur-micro: 150ms;
  --dur:       300ms;
  --dur-slow:  620ms;
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-out:  cubic-bezier(.4,0,.2,1);
}