/* ============================================================
   Mi Refugio en el Campo — Design Tokens
   Color + Typography foundations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;1,6..12,400&display=swap');

:root {
  /* ---------- Brand palette (raw) ---------- */
  --oliva-profundo:  #343719; /* deep olive — darkest brand tone */
  --oliva-principal: #5E5B2C; /* primary olive */
  --oliva-suave:     #756F38; /* soft olive */
  --dorado-calido:   #C99F48; /* warm gold */
  --crema-calido:    #FBF7EF; /* warm cream — default page bg */
  --arena-suave:     #F6EEDC; /* soft sand — alt section bg */
  --celeste-apagado: #94BAB0; /* muted teal */
  --coral-humano:    #D0676F; /* human coral — emotional accent */

  /* ---------- Text ---------- */
  --texto-principal:   #23251A; /* primary text */
  --texto-secundario:  #67654F; /* secondary text */

  /* ---------- Lines & surfaces ---------- */
  --borde-suave:   #DDD2BA; /* soft border */

  /* ---------- Semantic aliases ---------- */
  --bg:            var(--crema-calido);
  --bg-alt:        var(--arena-suave);
  --bg-deep:       var(--oliva-profundo);
  --surface:       #FFFFFF;
  --surface-sunk:  var(--arena-suave);

  --fg:            var(--texto-principal);
  --fg-muted:      var(--texto-secundario);
  --fg-on-deep:    var(--crema-calido);
  --fg-on-deep-muted: #C7C7AE;

  --line:          var(--borde-suave);
  --line-strong:   #C9BC9E;

  --primary:       var(--oliva-principal);
  --primary-hover: var(--oliva-profundo);
  --primary-fg:    var(--crema-calido);

  --accent-gold:   var(--dorado-calido);
  --accent-gold-hover: #B98E37;
  --accent-coral:  var(--coral-humano);
  --accent-teal:   var(--celeste-apagado);

  /* WhatsApp brand (for the conversion CTA) */
  --whatsapp:      #25A36B;
  --whatsapp-hover:#1E8957;

  /* ---------- Typography families ---------- */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Type scale (fluid, mobile-first) ---------- */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);   /* fine print / labels */
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);   /* body */
  --step-1:  clamp(1.18rem, 1.08rem + 0.45vw, 1.40rem);   /* lead / large body */
  --step-2:  clamp(1.50rem, 1.30rem + 0.95vw, 2.10rem);   /* h3 */
  --step-3:  clamp(1.95rem, 1.60rem + 1.70vw, 3.00rem);   /* h2 */
  --step-4:  clamp(2.35rem, 1.85rem + 2.40vw, 3.60rem);   /* h1 */
  --step-5:  clamp(2.70rem, 2.00rem + 3.10vw, 4.40rem);   /* hero display */

  /* ---------- Spacing scale (8pt base) ---------- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadows (warm, soft, low-contrast) ---------- */
  --shadow-sm: 0 1px 2px rgba(52, 55, 25, 0.05),
               0 2px 6px rgba(52, 55, 25, 0.04);
  --shadow-md: 0 4px 10px rgba(52, 55, 25, 0.06),
               0 12px 28px rgba(52, 55, 25, 0.07);
  --shadow-lg: 0 8px 20px rgba(52, 55, 25, 0.08),
               0 24px 56px rgba(52, 55, 25, 0.10);
  --shadow-focus: 0 0 0 3px rgba(94, 91, 44, 0.28);

  /* ---------- Motion ---------- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* ---------- Layout ---------- */
  --container: 1180px;
  --container-narrow: 760px;
}

/* ============================================================
   Semantic element styles — apply with utility classes
   (foundations only; components live in ui_kits)
   ============================================================ */

.ds-display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-5);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}

.ds-h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-4);
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-wrap: balance;
}

.ds-h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.18;
  color: var(--fg);
  text-wrap: balance;
}

.ds-h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.24;
  color: var(--fg);
  text-wrap: balance;
}

.ds-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.ds-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--fg);
  text-wrap: pretty;
}

/* Pull-quote / destacado — the brand's emotional one-liners */
.ds-quote {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.3;
  color: var(--primary);
  text-wrap: balance;
}

/* Eyebrow / kicker label */
.ds-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva-suave);
}

.ds-fine {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--fg-muted);
}