/* ============================================================
   DELESIELE · Design Tokens
   Paleta "Tinta y Ocre" · Modo claro
   Implementable directamente en WordPress (CSS variables)
   ============================================================ */

:root {
  /* ---------- MARCA · Primario (Verde-tinta) ---------- */
  --primary-50:  #F1F6F4;
  --primary-100: #E0ECE8;
  --primary-200: #C2D9D1;
  --primary-300: #93BAAE;
  --primary-400: #5C9485;
  --primary-500: #357566;
  --primary-600: #235D50;   /* base de marca · CTA */
  --primary-700: #1B4940;
  --primary-800: #143830;
  --primary-900: #0E2823;

  /* ---------- MARCA · Secundario (Granate) ---------- */
  --secondary-50:  #FAF1F2;
  --secondary-100: #F4E0E3;
  --secondary-200: #E7C2C8;
  --secondary-300: #D195A0;
  --secondary-400: #B45F6F;
  --secondary-500: #973F50;
  --secondary-600: #7E2E3E;  /* base · SIELE / acentos institucionales */
  --secondary-700: #642430;
  --secondary-800: #4C1C26;
  --secondary-900: #36131A;

  /* ---------- ACENTO (Ocre cálido) ---------- */
  --accent-50:  #FBF3E6;
  --accent-100: #F6E6CC;
  --accent-200: #EECFA0;
  --accent-300: #E2B16C;
  --accent-400: #D2963F;
  --accent-500: #BC7F2A;  /* base acento */
  --accent-600: #9C6720;
  --accent-700: #7C501A;

  /* ---------- NEUTROS CÁLIDOS ---------- */
  --ink:        #1C1B17;   /* texto principal */
  --ink-2:      #4A463D;   /* texto secundario */
  --ink-3:      #756F62;   /* texto terciario / mudo */
  --ink-4:      #9A9486;   /* placeholders, disabled */
  --line:       #E4DDD0;   /* bordes */
  --line-2:     #EFEADF;   /* bordes suaves / divisores */
  --surface:    #FFFFFF;   /* tarjetas */
  --surface-2:  #F6F1E7;   /* paneles cálidos */
  --bg:         #FBF8F1;   /* fondo de página (papel) */
  --bg-ink:     #122520;   /* fondo oscuro de marca (footer, CTA) */

  /* ---------- ESTADOS ---------- */
  --success:      #2F7D5B;
  --success-bg:   #E6F2EC;
  --success-line: #B9DCCB;
  --error:        #B23A37;
  --error-bg:     #F8E7E6;
  --error-line:   #E8BCB9;
  --info:         #2F6E8F;
  --info-bg:      #E6F0F5;
  --info-line:    #B7D5E2;
  --warning:      #B07717;
  --warning-bg:   #FBF0DC;
  --warning-line: #EBD3A3;

  /* ---------- TIPOGRAFÍA ---------- */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala fluida (desktop ↔ móvil vía clamp) */
  --fs-display:  clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);   /* 44 → 72 */
  --fs-h1:       clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); /* 34 → 52 */
  --fs-h2:       clamp(1.6rem, 1.25rem + 1.5vw, 2.375rem); /* 26 → 38 */
  --fs-h3:       clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); /* 22 → 28 */
  --fs-h4:       clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);/* 19 → 22 */
  --fs-h5:       1.125rem;   /* 18 */
  --fs-h6:       1rem;       /* 16 */
  --fs-body-lg:  1.1875rem;  /* 19 — lectura larga, público no nativo */
  --fs-body:     1.0625rem;  /* 17 */
  --fs-small:    0.9375rem;  /* 15 */
  --fs-caption:  0.8125rem;  /* 13 — mono / etiquetas */

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

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

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.14em;  /* eyebrows mono en mayúsculas */

  /* ---------- ESPACIADO (módulo 8, medios pasos de 4) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---------- LAYOUT / GRID ---------- */
  --container-max: 1200px;
  --container-narrow: 760px;   /* lectura de artículo */
  --gutter-desktop: 32px;
  --gutter-tablet:  24px;
  --gutter-mobile:  20px;
  --margin-mobile:  20px;
  --margin-tablet:  40px;

  /* ---------- RADIOS ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---------- SOMBRAS (cálidas, sutiles) ---------- */
  --shadow-xs: 0 1px 2px rgba(28, 27, 23, 0.06);
  --shadow-sm: 0 2px 6px rgba(28, 27, 23, 0.07);
  --shadow-md: 0 8px 24px rgba(28, 27, 23, 0.09);
  --shadow-lg: 0 20px 48px rgba(28, 27, 23, 0.12);
  --shadow-focus: 0 0 0 3px var(--primary-200);

  /* ---------- MOTION ---------- */
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  320ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);

  /* ---------- FOCO ---------- */
  --focus-ring: 2px solid var(--primary-500);
  --focus-offset: 2px;
}