/* ─────────────────────────────────────────────────────────────────
 * Telos.ONG · Design Tokens v1 — Dirección "Aguamarina luminosa"
 * Fuente de verdad para color, tipografía, espaciado, radios.
 * Importar en tema Ghost o cualquier proyecto frontend.
 * ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Color · base ──────────────────────────────────────────── */
  --color-bg:        #ffffff;   /* Fondo principal — blanco puro */
  --color-bg-soft:   #f2f4f1;   /* Fondo secundario — neutro muy suave */
  --color-ink:       #0f1e1e;   /* Tinta — textos principales */
  --color-ink-soft:  #3a4a48;   /* Tinta suave — secundarios */
  --color-line:      rgba(15, 30, 30, 0.12);  /* Líneas / bordes */

  /* ── Color · marca ─────────────────────────────────────────── */
  --color-accent:        #3fd0b0;   /* Aguamarina brillante · primario */
  --color-accent-strong: #1aa894;   /* Aguamarina saturada · hover/emphasis */
  --color-highlight:     #b8ecdd;   /* Menta suave · bloques/cards */

  /* ── Color · semántico ─────────────────────────────────────── */
  --color-link:         var(--color-accent-strong);
  --color-link-hover:   var(--color-ink);
  --color-focus-ring:   var(--color-accent);

  /* ── Tipografía · familias ─────────────────────────────────── */
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-sans:  "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Tipografía · escala (modular ratio 1.25) ──────────────── */
  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-hero: 120px;

  /* ── Tipografía · pesos ────────────────────────────────────── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ── Tipografía · line-height ──────────────────────────────── */
  --lh-tight: 0.95;
  --lh-snug:  1.15;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* ── Tipografía · tracking ─────────────────────────────────── */
  --ls-hero:  -0.03em;
  --ls-title: -0.02em;
  --ls-body:  0;
  --ls-caps:  0.14em;    /* Para labels mono en mayúsculas */
  --ls-caps-tight: 0.08em;

  /* ── Espaciado (escala 4px) ────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Radios (marca minimalista: casi sin radio) ────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;   /* Uso ocasional — por defecto, sin radio */

  /* ── Layout ────────────────────────────────────────────────── */
  --container-max:     1200px;
  --container-reading: 680px;   /* Ancho óptimo para lectura larga */
  --gutter:            clamp(16px, 4vw, 48px);

  /* ── Motion ────────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:       cubic-bezier(0.8, 0, 0.8, 0.2);
  --ease-inout:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
  --d-1: 120ms;   /* hover, press, micro-feedback */
  --d-2: 200ms;   /* toggles, menus */
  --d-3: 320ms;   /* entradas UI */
  --d-4: 520ms;   /* cards, bloques editoriales */
  --d-5: 840ms;   /* héroes, transiciones de página */

  /* Aliases legacy */
  --duration-1: var(--d-1);
  --duration-2: var(--d-2);
  --duration-3: var(--d-3);
}

.dark {
  --color-bg:        #1a1a1a;
  --color-bg-soft:   #252525;
  --color-ink:       #ededec;
  --color-ink-soft:  #a0a0a0;
  --color-line:      rgba(255, 255, 255, 0.12);
  --color-highlight: #2a2a2a;
}