/* ============================================================
   CPR — Tokens de diseño
   Fuente: proyecto Claude Design "Raíces Design System"
   (8858c7fc-5e39-44d1-815f-c7d959412eb9), tokens/{colors,typography,
   spacing,fonts}.css — consolidados aquí en un solo archivo para
   evitar encadenar requests con @import. Valores verificados contra
   los hex hardcodeados en Estilos/*.css, tematicas-ads*.css y los
   :root que tenían Landing/00-Header.html y 01-Hero.html (ya
   eliminados de esos archivos — centralizados acá).
   No editar a mano sin actualizar también el proyecto de diseño.
   ============================================================ */

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-Variable-subset.woff2") format("woff2"),
       url("../fonts/SourceSans3-Variable-subset.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Verdes de marca (bosque "Raíces") ---- */
  --green-900: #1b2d15;
  --green-800: #263f1e;
  --green-700: #3a5a2a;
  --green-600: #5b8109;
  --green-500: #70a309;
  --green-300: #a7c957;
  --green-100: #eaf3de;
  --green-050: #f4f8ec;

  /* ---- Café cálido (wordmark "Raíces") ---- */
  --brown-700: #4a3424;
  --brown-600: #6b4a30;
  --brown-300: #b89a7e;

  /* ---- Crema / neutros cálidos ---- */
  --cream-100: #fdfaf1;

  /* ---- Neutros fríos (grises de UI) ---- */
  --white:     #ffffff;
  --grey-050:  #f7f8f5;
  --grey-100:  #f2f4f7;
  --grey-200:  #e0e3e7;
  --grey-300:  #d5d8dc;
  --grey-400:  #cacaca;
  --grey-500:  #9e9e9e;
  --grey-600:  #6e6e6e;
  --grey-700:  #555555;
  --ink:       #263f1e;

  /* ---- Semántico / estado ---- */
  --star:        var(--green-500);
  --star-empty:  #d5d5d5;
  --success:     #2e7d32;
  --warning:     #e6a700;
  --danger:      #c0392b;

  /* ---- Overlay de hero (scrim oscuro sobre imagen) ---- */
  --scrim:        rgba(0, 0, 0, 0.75);
  --scrim-soft:   rgba(0, 0, 0, 0.5);
  --border-card:  rgba(38, 63, 30, 0.25);

  /* ---- Alias semánticos ---- */
  --color-bg:            var(--white);
  --color-bg-warm:       var(--cream-100);
  --color-bg-soft:       var(--green-100);
  --color-surface:       var(--white);
  --color-surface-alt:   var(--grey-050);

  --color-primary:       var(--green-600);
  --color-primary-hover: var(--green-700);
  --color-primary-press: var(--green-800);
  --color-accent:        var(--green-500);
  --color-brand-dark:    var(--green-800);
  --color-on-primary:    var(--white);

  --text-strong:         var(--green-800);
  --text-body:           var(--grey-700);
  --text-secondary:      var(--grey-600);
  --text-muted:          var(--grey-500);
  --text-on-dark:        var(--white);
  --text-on-dark-soft:   rgba(255, 255, 255, 0.75);

  --border-hairline:     var(--grey-200);
  --border-strong:       var(--green-800);
  --focus-ring:          var(--green-500);

  /* ---- Tipografía ---- */
  --font-sans:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Source Sans 3", system-ui, sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display:  clamp(2.2rem, 5vw, 3.5rem);
  --fs-h1:       clamp(1.8rem, 4vw, 2.75rem);
  --fs-h2:       clamp(1.4rem, 3vw, 2rem);
  --fs-h3:       clamp(1.1rem, 2.2vw, 1.35rem);
  --fs-lead:     clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-2xs:      0.7rem;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;

  /* ---- Espaciado (base 4px) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;

  --section-pad-y: clamp(2rem, 6vh, 6rem);
  --section-pad-x: clamp(1rem, 5vw, 4rem);
  --content-max:   1200px;

  /* ---- Radios ---- */
  --radius-sm:   7px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 100px;

  /* ---- Bordes ---- */
  --bw-hairline: 1px;
  --bw-strong:   2px;

  /* ---- Sombras (sombra offset, firma de marca) ---- */
  --shadow-card:  -3px 3px 5px 1px rgba(0, 0, 0, 0.25);
  --shadow-sm:    0 1px 2px rgba(38, 63, 30, 0.08);
  --shadow-md:    0 6px 18px rgba(38, 63, 30, 0.12);
  --shadow-lg:    0 16px 40px rgba(38, 63, 30, 0.25);
  --shadow-focus: 0 0 0 3px rgba(112, 163, 9, 0.25);
  --shadow-strong: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);


  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.15s;
  --dur-base:   0.2s;
  --dur-slow:   0.3s;
}