/* ============================================================================
   EthicsTotal — DESIGN TOKENS (definitivos · ratificados por direccion 2026-07)
   ----------------------------------------------------------------------------
   REGLA ABSOLUTA: este es el UNICO archivo con valores hex del sitio.
   Todo color en site.css se referencia como var(--*) SIN fallbacks.
   Cualquier ajuste futuro de identidad se hace SOLO aqui, un archivo.
   Paleta base y tipografia: Blueprint §5.
   ============================================================================ */

:root {
  /* --- Paleta core (Blueprint §5) --- */
  --ink:         #0E1B2C;   /* azul noche base */
  --ink-deep:    #14263D;   /* azul tinta profundo */
  --copper:      #B0894F;   /* acento cobre — CTAs y detalles */
  --copper-soft: #C9A66B;   /* cobre claro — hovers, subrayados */
  --ivory:       #F6F3EC;   /* marfil — fondos claros */
  --stone:       #8A8D93;   /* gris piedra — texto secundario */
  --sage:        #7A9278;   /* verde salvia — SOLO estados de exito */

  /* --- Neutros derivados (tintes de la paleta core, definidos aqui como hex) --- */
  --ink-950:     #0A1420;   /* mas profundo que ink, para bordes sobre oscuro */
  --ivory-hi:    #FCFAF5;   /* marfil casi blanco, superficies elevadas */
  --line-ink:    #24374E;   /* linea sutil sobre fondos oscuros */
  --line-ivory:  #E4DFD3;   /* linea sutil sobre fondos claros */
  --stone-deep:  #5C6068;   /* gris piedra mas oscuro para cuerpo sobre marfil */
  --copper-deep: #8A6836;   /* cobre oscuro: cobre como TEXTO sobre fondos claros (AA ~4.6:1) */

  /* --- Overlays y transparencias (rgba con RGB de la paleta, sin hex sueltos) --- */
  --overlay-ink:        rgba(14, 27, 44, 0.72);   /* overlay azul-tinta sobre imagenes */
  --overlay-ink-strong: rgba(14, 27, 44, 0.88);
  --tint-copper:        rgba(176, 137, 79, 0.12); /* fondo tenue cobre */
  --tint-copper-line:   rgba(176, 137, 79, 0.35);
  --tint-ivory:         rgba(246, 243, 236, 0.08);
  --tint-ivory-line:    rgba(246, 243, 236, 0.16);
  --tint-sage:          rgba(122, 146, 120, 0.14);
  --shadow-soft:        0 1px 2px rgba(10, 20, 32, 0.06), 0 8px 24px rgba(10, 20, 32, 0.08);
  --shadow-lift:        0 2px 4px rgba(10, 20, 32, 0.10), 0 18px 48px rgba(10, 20, 32, 0.16);
  --focus-ring:         0 0 0 3px rgba(176, 137, 79, 0.45);

  /* --- Roles semanticos de color --- */
  --bg:              var(--ivory);
  --bg-elevated:     var(--ivory-hi);
  --bg-dark:         var(--ink);
  --bg-dark-deep:    var(--ink-deep);
  --text:            var(--ink);
  --text-muted:      var(--stone-deep);
  --text-on-dark:    var(--ivory);
  --text-on-dark-muted: var(--stone);
  --accent:          var(--copper);        /* cobre para RELLENOS, bordes, iconos, decoracion */
  --accent-hover:    var(--copper-soft);
  --accent-text:     var(--copper-deep);    /* cobre para TEXTO sobre fondos claros (contraste AA) */
  --accent-text-dark: var(--copper-soft);   /* cobre para TEXTO sobre fondos oscuros */
  --success:         var(--sage);
  --border:          var(--line-ivory);
  --border-on-dark:  var(--line-ink);

  /* --- Tipografia (Blueprint §5: Fraunces display + Familjen Grotesk cuerpo/UI) --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-body:      400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-display:   500;
  --fw-display-bold: 600;

  /* Escala fluida (clamp): min movil ~380px, max desktop */
  --fs-eyebrow:  0.8125rem;
  --fs-small:    0.9375rem;
  --fs-body:     1.0625rem;
  --fs-lead:     clamp(1.125rem, 0.9rem + 1vw, 1.375rem);
  --fs-h3:       clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --fs-h2:       clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --fs-h1:       clamp(2.375rem, 1.4rem + 4.4vw, 4.25rem);
  --fs-display:  clamp(2.75rem, 1.5rem + 5.6vw, 5rem);

  --lh-tight:    1.08;
  --lh-heading:  1.16;
  --lh-body:     1.62;

  --ls-eyebrow:  0.14em;
  --ls-tight:    -0.02em;
  --ls-normal:   0;

  /* --- Espaciado (escala 4px) --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* Ritmo vertical generoso de seccion (espacio en blanco — Blueprint §5) */
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* --- Layout --- */
  --container:      72rem;
  --container-wide: 80rem;
  --container-text: 46rem;
  --gutter:         clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* --- Radios --- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Bordes --- */
  --bw:      1px;
  --bw-thick: 2px;

  /* --- Movimiento (iconografia/interacciones sobrias) --- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   140ms;
  --dur:        240ms;
  --dur-slow:   420ms;

  /* --- Grosor de linea fina para iconografia (Blueprint §5) --- */
  --icon-stroke: 1.5;
  --z-header: 100;
}