/* Tokens del sistema de diseño LegalWP (fuente: design-system/tokens/).
   Cambio respecto al kit: fuentes auto-hospedadas (sin Google Fonts CDN) por coherencia RGPD. */

/* ---- Fuentes (variables, subset latin) ---- */
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/lora.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/lora-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/public-sans.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/public-sans-italic.woff2') format('woff2');
}

:root{
  /* Superficies (blancos cálidos, saturación mínima) */
  --paper:#F4F3EF;        /* fondo base */
  --paper-2:#EBEAE3;      /* sección alterna */
  --surface:#FFFFFF;      /* tarjetas */
  --ink:#16181D;          /* texto principal / banda oscura */
  --ink-2:#41454D;        /* texto secundario */
  --ink-3:#6E727A;        /* texto terciario / captions */
  --line:#DCDAD1;         /* bordes */
  --line-strong:#B9B7AE;

  /* Marca: terracota (titulares destacados, subrayados, detalles) */
  --brand:oklch(0.62 0.15 43);
  --brand-strong:oklch(0.54 0.15 43);
  --brand-tint:oklch(0.94 0.035 43);

  /* Acento de acción: azul profundo (CTAs, enlaces) */
  --accent:oklch(0.52 0.15 262);
  --accent-strong:oklch(0.45 0.15 262);
  --accent-tint:oklch(0.94 0.035 262);

  /* Semánticos (checklist de cumplimiento) */
  --ok:oklch(0.58 0.12 155);
  --ok-tint:oklch(0.95 0.04 155);
  --warn:oklch(0.72 0.13 75);
  --warn-tint:oklch(0.96 0.05 85);
  --error:oklch(0.55 0.18 25);
  --error-tint:oklch(0.95 0.04 25);

  /* Alias semánticos */
  --text-heading:var(--ink);
  --surface-card:var(--surface);
  --cta-bg:var(--accent);
  --cta-bg-hover:var(--accent-strong);
  --link:var(--accent);
  --link-hover:var(--accent-strong);

  /* Tipografía */
  --font-display:'Lora',Georgia,serif;
  --font-body:'Public Sans',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;

  --text-display-xl:clamp(44px,6vw,72px); --lh-display-xl:1.04;
  --text-display-l:clamp(34px,4.5vw,52px); --lh-display-l:1.1;
  --text-h2:clamp(28px,3.5vw,40px); --lh-h2:1.15;
  --text-h3:23px; --lh-h3:1.3;
  --text-lead:20px; --lh-lead:1.6;
  --text-body:17px; --lh-body:1.65;
  --text-small:14.5px; --lh-small:1.5;
  --text-caption:12.5px; --lh-caption:1.4;

  /* Espaciado y forma */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;
  --radius-s:6px;--radius-m:12px;--radius-pill:999px;
  --shadow-card:0 1px 2px rgba(22,24,29,.05),0 4px 16px rgba(22,24,29,.06);
  --shadow-pop:0 8px 32px rgba(22,24,29,.14);
  --container:1200px;
  --border:1px solid var(--line);
}

body{margin:0;font-family:var(--font-body);font-size:var(--text-body);line-height:var(--lh-body);color:var(--ink-2);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:500;color:var(--ink);letter-spacing:-0.01em;text-wrap:pretty}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-strong)}