/* ═══════════════════════════════════════════════════════════════════════════
   NexoCBD · Tokens de diseño
   Dirección: «Naturaleza conectada, ciencia clara»
   Toda decisión visual del sitio pasa por este archivo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color de marca (provisional: extraído del logo aportado) ───────────── */
  --nexo-ink:      #102532;
  --nexo-forest:   #285D43;
  --nexo-leaf:     #7FA64A;
  --bone:          #F7F5EF;
  --sage:          #C5D4B6;
  --saffron:       #E7A94B;
  --clay:          #C9755B;
  --sky:           #BFD8D5;

  /* Derivados con contraste verificado (AA sobre --surface) */
  --ink-90:        #1B333F;
  --ink-70:        #3C5561;
  --ink-55:        #55666F;   /* 5.0:1 sobre bone — mínimo para texto auxiliar */
  --forest-deep:   #1C4632;
  --leaf-deep:     #5A7A32;   /* versión legible de --nexo-leaf para texto */
  --clay-deep:     #A0492F;   /* versión legible de --clay para texto */
  --saffron-deep:  #8A5A08;   /* versión legible de --saffron para texto */
  --sky-deep:      #2C5D5A;

  /* ── Superficies ────────────────────────────────────────────────────────── */
  --surface:        #F7F5EF;
  --surface-raised: #FFFDF8;
  --surface-sunken: #EFEBE1;
  --surface-sage:   #E7EEE0;
  --surface-sky:    #E4EFED;
  --surface-ink:    #0E212C;
  --surface-ink-2:  #16323F;

  /* ── Texto ──────────────────────────────────────────────────────────────── */
  --text:          var(--nexo-ink);
  --text-soft:     var(--ink-70);
  --text-muted:    var(--ink-55);
  --text-invert:   #F2F5F1;
  --text-invert-soft: #B9C9C4;
  --link:          var(--forest-deep);
  --link-hover:    var(--nexo-ink);

  /* ── Líneas y sombras ───────────────────────────────────────────────────── */
  --rule:          #DCD6C8;
  --rule-strong:   #BFB7A4;
  --focus:         #1C4632;
  --shadow-sm: 0 1px 2px rgb(16 37 50 / 0.06), 0 2px 8px rgb(16 37 50 / 0.04);
  --shadow-md: 0 2px 4px rgb(16 37 50 / 0.05), 0 12px 28px -12px rgb(16 37 50 / 0.16);

  /* ── Tipografía ─────────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino,
                  'Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-ui: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
             Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono',
               Menlo, Consolas, 'Liberation Mono', monospace;

  /* Escala fluida — móvil 360 px → desktop 1440 px */
  --step--2: clamp(0.76rem, 0.74rem + 0.10vw, 0.82rem);
  --step--1: clamp(0.90rem, 0.87rem + 0.14vw, 0.98rem);
  --step-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.15rem);   /* ≥17px en móvil */
  --step-1:  clamp(1.25rem, 1.18rem + 0.34vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.36rem + 0.62vw, 1.9rem);
  --step-3:  clamp(1.85rem, 1.60rem + 1.10vw, 2.55rem);
  --step-4:  clamp(2.25rem, 1.83rem + 1.86vw, 3.4rem);
  --step-5:  clamp(2.7rem, 2.02rem + 3.00vw, 4.6rem);

  --leading-tight: 1.1;
  --leading-snug: 1.28;
  --leading-body: 1.62;
  --measure: 68ch;
  --measure-narrow: 54ch;

  /* ── Espaciado (escala de cuarta menor sobre 8px) ───────────────────────── */
  --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;

  /* ── Formas ─────────────────────────────────────────────────────────────── */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-pill: 999px;

  /* ── Rejilla editorial asimétrica ───────────────────────────────────────── */
  /* Altura real de la cabecera fija. El componente Header la mantiene exacta
     con un ResizeObserver; este valor es el respaldo cuando no hay JavaScript.
     Todo elemento pegajoso y todo scroll-margin la usan: si no, el contenido
     queda por debajo de la cabecera al saltar a un ancla. */
  --header-h: 4.75rem;

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --page-max: 1320px;
  --col-rail: 15.5rem;      /* rail de índice / ficha */

  /* ── Movimiento ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 480ms;

  /* ── Escala de evidencia (nunca solo color: siempre letra + etiqueta) ───── */
  --ev-a-bg: #DCEBE0; --ev-a-fg: #14452B; --ev-a-line: #2F7A50;
  --ev-b-bg: #E2EDE2; --ev-b-fg: #23522F; --ev-b-line: #4C8A57;
  --ev-c-bg: #FBF0DA; --ev-c-fg: #7A5209; --ev-c-line: #C9922C;
  --ev-d-bg: #F6E7DF; --ev-d-fg: #8A3F26; --ev-d-line: #C9755B;
  --ev-e-bg: #EFEBE1; --ev-e-fg: #4A4437; --ev-e-line: #A29881;

  /* ── Estados legales ────────────────────────────────────────────────────── */
  --legal-ok-bg:    #DCEBE0; --legal-ok-fg:    #14452B;
  --legal-cond-bg:  #FBF0DA; --legal-cond-fg:  #7A5209;
  --legal-no-bg:    #F6E2DC; --legal-no-fg:    #8A2F1C;
  --legal-grey-bg:  #E7E7E3; --legal-grey-fg:  #3E4A44;
}

/* Ajustes de contraste para usuarios que lo solicitan */
@media (prefers-contrast: more) {
  :root {
    --text-muted: #3C5561;
    --rule: #B3AB98;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}