/* ============================================================
   TERRAMAR AGRÍCOLA · Capa 2 — Marca
   Repinta los tokens del design system (tokens.css) con la
   identidad TerraMar. NO redefine componentes: como todos los
   .ds-* usan variables CSS, repintar aquí "tiñe" todo el kit.

   Cargar SIEMPRE después de tokens.css y antes de components.css.

   Paleta aprobada (manual de marca _ref/1-3.png):
     Verde principal   #145B2A   header, footer, botones primarios
     Verde secundario  #6F982F   categorías, iconografía, acento vegetal
     Azul mar          #1F82C5   detalles, fondos de apoyo
     Azul cielo        #8FD4F7   fondos suaves
     Amarillo sol      #F2B431   CTAs, hover, destacados
     Marrón tierra     #7A5A2B   texturas, detalles secundarios
     Blanco / crema    #FFFFFF / #FAFAF7
   Tipografía: serif Cormorant Garamond (títulos) + sans Inter (texto).
   ============================================================ */

:root {

  /* ---- Tipografía de marca (arquetipo editorial) ------------------------ */
  /* --font-secondary = títulos/serif ; --font-primary = cuerpo/UI sans      */
  /* Par tipográfico aprobado (del prototipo Stitch): sans moderno + serif moderno.
     --font-primary = cuerpo/UI (sans) ; --font-secondary = títulos (serif).
     Repinta TODO el kit DS porque button/card/chip usan estas variables. */
  --font-primary: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-secondary: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-secondary-alt: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Escala tipográfica de marca (Capa 2) ----------------------------------
     Organizada como el DS de la fábrica: los PESOS usan los tokens --fw-* de
     tokens.css (--fw-regular 400 · --fw-medium 500 · --fw-semiBold 600 · --fw-bold 700).
     Las FAMILIAS: --font-secondary = serif (títulos) · --font-primary = sans (cuerpo).
     Esta escala vive aquí (no en site.css) para ser la única fuente de verdad. */
  --fs-display:  clamp(2.25rem, 1.4rem + 3.4vw, 3rem);   /* Hero / h1             ≈ 36→48px */
  --fs-h-lg:     clamp(1.75rem, 1.3rem + 1.8vw, 2rem);   /* Título de sección h2  ≈ 28→32px */
  --fs-h-md:     1.5rem;                                  /* Subtítulo / card h3     24px    */
  --fs-body-lg:  1.125rem;                                /* Lead / intro            18px    */
  --fs-body:     1rem;                                    /* Cuerpo base             16px    */
  --fs-label:    0.875rem;                                /* Label / UI              14px    */
  --fs-label-sm: 0.75rem;                                 /* Pie / chips             12px    */
  --lh-tight:  1.15;   /* títulos    */
  --lh-snug:   1.3;    /* subtítulos */
  --lh-normal: 1.6;    /* cuerpo     */

  /* ---- Alias de marca (para usar por nombre en patrones de página) ------ */
  --brand-verde-principal: #145B2A;
  --brand-verde-secundario: #6F982F;
  --brand-azul-mar: #1F82C5;
  --brand-azul-cielo: #8FD4F7;
  --brand-amarillo-sol: #F2B431;   /* JOYA · solo como hairline/guión sobre blanco. NO en botones. */
  --brand-marron-tierra: #7A5A2B;  /* eyebrow / detalle cálido (acento terciario), sobre blanco */
  --brand-crema: #FAFAF7;

  /* ---- TINTA verde (≈ "negro" de la marca) — SOLO TEXTO/COPYS, nunca fondo -- */
  /* Extraída del wordmark del logo. Reemplaza al negro en titulares.           */
  --brand-ink: #11251A;

  /* ---- Ancla oscura — ÚNICO rescate de "Campo profundo": el FOOTER --------- */
  /* El sitio es claro (propuesta 1). El footer va en verde bosque con el logo  */
  /* dentro de un card blanco. Este token se usa solo ahí (ver .tm-footer).     */
  --brand-verde-bosque:   #082611;

  /* ---- Superficies CLARAS (escala Stitch, tinte verde muy claro) ---------- */
  --brand-surface:        #F7FAF3;   /* superficie base */
  --brand-surface-low:    #F2F5ED;   /* superficie un paso más */
  --brand-surface-cont:   #ECEFE7;   /* contenedor */
  --brand-verde-container:#E7F0D4;   /* contenedor verde claro (chips/realces) */
  --brand-lime:           #C3F27D;   /* lima (acento claro, del prototipo) */
  --brand-bg-verde-soft:  #ECEFE4;
  --brand-bg-azul-soft:   #EAF4FB;

  /* ======================================================================
     PRIMARY = Verde TerraMar
     ====================================================================== */
  --palette-primary-lighter: #E6EFD8;
  --palette-primary-light:   #6F982F;   /* verde secundario de marca */
  --palette-primary-main:    #145B2A;   /* verde principal de marca */
  --palette-primary-dark:    #0E4220;
  --palette-primary-darker:  #082611;
  --palette-primary-contrastText: #FFFFFF;

  /* ======================================================================
     SECONDARY = Azul mar
     ====================================================================== */
  --palette-secondary-lighter: #D9EEFB;
  --palette-secondary-light:   #8FD4F7;   /* azul cielo de marca */
  --palette-secondary-main:    #1F82C5;   /* azul mar de marca */
  --palette-secondary-dark:    #155E92;
  --palette-secondary-darker:  #0C3A5C;
  --palette-secondary-contrastText: #FFFFFF;

  /* ======================================================================
     WARNING = Amarillo sol  → canal del CTA / acento destacado
     (texto oscuro para contraste accesible sobre amarillo)
     ====================================================================== */
  --palette-warning-lighter: #FDF0CF;
  --palette-warning-light:   #F8CE6E;
  --palette-warning-main:    #F2B431;   /* amarillo sol de marca */
  --palette-warning-dark:    #C98E1C;
  --palette-warning-darker:  #8A5F10;
  --palette-warning-contrastText: #1A1A1A;

  /* ======================================================================
     INFO = se alinea al azul mar para coherencia de marca
     (success / error se dejan como colores de sistema: feedback, no marca)
     ====================================================================== */
  --palette-info-lighter: #D9EEFB;
  --palette-info-light:   #5FA9DD;
  --palette-info-main:    #1F82C5;
  --palette-info-dark:    #155E92;
  --palette-info-darker:  #0C3A5C;
  --palette-info-contrastText: #FFFFFF;

  /* ======================================================================
     Texto, fondos y superficies — tinte cálido-vegetal sutil
     ====================================================================== */
  --text-primary:   #191D18;             /* casi-negro verdoso (on-background Stitch) */
  --text-secondary: #404940;             /* gris-verde (on-surface-variant Stitch) */
  --text-disabled:  #9AA69E;

  --bg-default: #F7FAF3;       /* fondo de página (surface Stitch) */
  --bg-paper:   #FFFFFF;       /* tarjetas */
  --bg-neutral: #F2F5ED;       /* superficie un paso */

  --divider: rgb(31 42 34 / 0.12);

  /* sombras con tinte verde-grisáceo muy sutil (no neutro frío) */
  --shadow-color: 40 60 48;

  /* acciones derivadas del verde principal */
  --action-hover:    rgb(20 91 42 / 0.06);
  --action-selected: rgb(20 91 42 / 0.12);
  --action-focus:    rgb(20 91 42 / 0.18);
}

/* ============================================================
   Esquema oscuro de marca — reservado para futuro modo oscuro.
   El sitio es CLARO por defecto; no se usan fondos verde oscuro.
   ============================================================ */
[data-scheme="dark"] {
  --bg-default: var(--brand-ink);
  --bg-paper:   #16321F;
  --bg-neutral: #0A2814;
  --text-primary:   #FFFFFF;
  --text-secondary: #BFD2C5;
  --text-disabled:  #7E978A;
  --divider: rgb(255 255 255 / 0.14);
  --shadow-color: 0 0 0;
}