/* =========================================================
 * design-tokens.css — Tema JP 2026
 * Sistema de diseño "Editorial Tech Portfolio".
 * Todas las decisiones de color / tipo / spacing / radios / sombras
 * viven aquí como variables. Si cambia algo, cambia aquí.
 * ========================================================= */

:root {
	/* ---------- Color: superficies ---------- */
	--pm-surface:            #fcf9f8;   /* fondo global */
	--pm-surface-dim:        #dcd9d9;
	--pm-surface-bright:     #fcf9f8;
	--pm-surface-low:        #f6f3f2;
	--pm-surface-mid:        #f0eded;
	--pm-surface-high:       #eae7e7;
	--pm-surface-card:       #ffffff;   /* fondo de tarjetas */
	--pm-surface-off-white:  #F9FAFB;   /* fondo alterno sección */
	--pm-warm-grey-border:   #E5E7EB;   /* hairline */
	--pm-quote-highlight:    #FEF3C7;   /* fondo amarillo de cita */

	/* ---------- Color: texto ---------- */
	--pm-ink:                #1c1b1b;   /* texto principal (soft black) */
	--pm-ink-2:              #43474f;   /* texto secundario */
	--pm-ink-3:              #595f66;   /* metadatos */
	--pm-outline:            #737780;
	--pm-outline-soft:       #c3c6d0;
	--pm-on-inverse:         #f3f0ef;
	--pm-inverse-surface:    #313030;

	/* ---------- Color: primary + acentos ---------- */
	--pm-primary:            #0e3b69;
	--pm-primary-hover:      #0b3258;
	--pm-primary-soft:       #2c5282;
	--pm-on-primary:         #ffffff;
	--pm-primary-container:  #d4e3ff;
	--pm-tech-accent:        #3182CE;   /* Steel Blue */
	--pm-tech-accent-soft:   rgba(49, 130, 206, 0.12);

	/* ---------- Color: estado ---------- */
	--pm-success:            #207a52;
	--pm-warning:            #b76e00;
	--pm-error:              #ba1a1a;
	--pm-on-error:           #ffffff;
	--pm-error-bg:           #ffdad6;

	/* ---------- Tipografía ---------- */
	--pm-font-sans:    'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--pm-font-serif:   'EB Garamond', Georgia, 'Times New Roman', serif;
	--pm-font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* Escala (usa rem para escalar con accesibilidad) */
	--pm-fs-display-lg:        3rem;       /* 48px */
	--pm-fs-display-lg-mobile: 2.25rem;    /* 36px */
	--pm-fs-headline-md:       1.5rem;     /* 24px */
	--pm-fs-body-lg:           1.125rem;   /* 18px */
	--pm-fs-body-md:           1rem;       /* 16px */
	--pm-fs-body-sm:           0.875rem;   /* 14px */
	--pm-fs-label:             0.75rem;    /* 12px */
	--pm-fs-quote:             1.375rem;   /* 22px */

	--pm-lh-display:           1.16;
	--pm-lh-headline:          1.33;
	--pm-lh-body:              1.55;
	--pm-lh-label:             1.33;

	--pm-tracking-display:    -0.02em;
	--pm-tracking-label:       0.05em;

	--pm-weight-regular:       400;
	--pm-weight-medium:        500;
	--pm-weight-semibold:      600;
	--pm-weight-bold:          700;

	/* ---------- Spacing (escala 4px) ---------- */
	--pm-space-1:   0.25rem;   /* 4 */
	--pm-space-2:   0.5rem;    /* 8 */
	--pm-space-3:   0.75rem;   /* 12 */
	--pm-space-4:   1rem;      /* 16 */
	--pm-space-5:   1.25rem;   /* 20 */
	--pm-space-6:   1.5rem;    /* 24 */
	--pm-space-8:   2rem;      /* 32 */
	--pm-space-10:  2.5rem;    /* 40 */
	--pm-space-12:  3rem;      /* 48 */
	--pm-space-16:  4rem;      /* 64 */
	--pm-space-20:  5rem;      /* 80 */
	--pm-space-24:  6rem;      /* 96 */

	--pm-gutter:        1.5rem; /* 24 */
	--pm-gutter-mobile: 1rem;   /* 16 */
	--pm-section-gap:   5rem;   /* 80 */
	--pm-container:     1120px;

	/* ---------- Radios ---------- */
	--pm-radius-xs:   2px;
	--pm-radius-sm:   4px;       /* 0.25rem — default */
	--pm-radius-md:   8px;
	--pm-radius-lg:   12px;
	--pm-radius-xl:   16px;
	--pm-radius-2xl:  24px;
	--pm-radius-pill: 9999px;

	/* ---------- Sombras (planas, editoriales) ---------- */
	--pm-shadow-0:  none;
	--pm-shadow-1:  0 1px 0 rgba(28,27,27,0.04);
	--pm-shadow-2:  0 4px 12px rgba(28,27,27,0.06);
	--pm-shadow-3:  0 12px 32px rgba(28,27,27,0.10);
	--pm-shadow-focus: 0 0 0 3px rgba(49,130,206,0.30);

	/* ---------- Z-index ---------- */
	--pm-z-header:  50;
	--pm-z-overlay: 90;
	--pm-z-modal:   100;
	--pm-z-toast:   110;

	/* ---------- Motion ---------- */
	--pm-ease:        cubic-bezier(.2,.7,.2,1);
	--pm-dur-fast:    140ms;
	--pm-dur-base:    220ms;
	--pm-dur-slow:    420ms;

	/* ---------- Layout reservado para sticky header ---------- */
	--pm-header-h:    80px;
}

/* Modo oscuro (suave, opcional, no obligatorio).
   Se activa solo si el usuario lo pide a nivel de SO y el body no
   declara forzar el modo claro vía html[data-theme="light"]. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--pm-surface:          #14171b;
		--pm-surface-low:      #1a1d22;
		--pm-surface-mid:      #1f2227;
		--pm-surface-high:     #25282d;
		--pm-surface-card:     #1d2025;
		--pm-surface-off-white:#15181c;
		--pm-warm-grey-border: #2a2d33;
		--pm-quote-highlight:  #3a3008;

		--pm-ink:              #f1ede9;
		--pm-ink-2:            #c8ccd4;
		--pm-ink-3:            #a3a8b1;
		--pm-outline:          #6b6f78;
		--pm-outline-soft:     #3a3d44;

		--pm-primary:          #a5c8ff;
		--pm-primary-hover:    #c4dafc;
		--pm-on-primary:       #0c1a2b;
		--pm-tech-accent:      #6FB5EA;
		--pm-tech-accent-soft: rgba(111,181,234,0.15);
	}
}

/* Respeto al "reduced motion". */
@media (prefers-reduced-motion: reduce) {
	:root {
		--pm-dur-fast: 0ms;
		--pm-dur-base: 0ms;
		--pm-dur-slow: 0ms;
	}
}