/* ==========================================================================
ALFREDO PALACIOS · EVOLUCIÓN PROFESIONAL
Tokens de diseño — v1.0
Base para el futuro sitio web y para todas las piezas digitales.
Importar este archivo antes que cualquier otra hoja de estilos.
Tipografías (Google Fonts, licencia OFL — uso libre comercial):
========================================================================== */
:root {
/* ---------- 1. Paleta institucional (valores primitivos) ---------- */
--ap-azul-cumbre: #0E2A47; /* Primario. Autoridad, confianza, fondos oscuros, textos de titular */
--ap-azul-estrategia: #1D4F7C; /* Secundario. Enlaces, botones hover, datos */
--ap-celeste-horizonte:#8CB9DC; /* Acento frío. Gráficos, tramas, detalles sobre azul */
--ap-celeste-bruma: #E6F0F8; /* Fondo de sección suave, tarjetas destacadas */
--ap-oro-mineral: #A47D45; /* Acento de marca. La "diagonal de ascenso". Uso mínimo */
--ap-oro-claro: #D6B98A; /* Acento sobre fondos oscuros. Botón CTA sobre azul */
--ap-oro-profundo: #7E5F30; /* Texto dorado sobre fondo claro (cumple AA) */
--ap-marfil: #F7F4EE; /* Fondo cálido alternativo al blanco */
--ap-blanco: #FFFFFF;
--ap-grafito: #1C232B; /* Texto de lectura */
--ap-gris-piedra: #5E6B78; /* Texto secundario, metadatos */
--ap-gris-niebla: #D8DEE5; /* Bordes, divisores */
/* ---------- 2. Tokens semánticos (tema claro) ---------- */
--color-bg: var(--ap-blanco);
--color-bg-alt: var(--ap-marfil);
--color-bg-soft: var(--ap-celeste-bruma);
--color-bg-inverse: var(--ap-azul-cumbre);
--color-surface: var(--ap-blanco);
--color-text: var(--ap-grafito);
--color-text-muted: var(--ap-gris-piedra);
--color-heading: var(--ap-azul-cumbre);
--color-text-inverse: var(--ap-blanco);
--color-text-inverse-muted: #B9C7D6;
--color-accent: var(--ap-oro-mineral);
--color-accent-text: var(--ap-oro-profundo);
--color-accent-on-dark: var(--ap-oro-claro);
--color-link: var(--ap-azul-estrategia);
--color-link-hover: var(--ap-azul-cumbre);
--color-border: var(--ap-gris-niebla);
--color-border-strong: #AEB9C5;
--color-focus: var(--ap-azul-estrategia);
--color-data-1: var(--ap-azul-cumbre);
--color-data-2: var(--ap-azul-estrategia);
--color-data-3: var(--ap-celeste-horizonte);
--color-data-highlight: var(--ap-oro-mineral);
--color-success: #2E7D5B;
--color-warning: #B7791F;
--color-error: #B3392F;
/* Botones */
--btn-primary-bg: var(--ap-azul-cumbre);
--btn-primary-text: var(--ap-blanco);
--btn-primary-bg-hover: var(--ap-azul-estrategia);
--btn-secondary-bg: transparent;
--btn-secondary-text: var(--ap-azul-cumbre);
--btn-secondary-border: var(--ap-azul-cumbre);
--btn-accent-bg: var(--ap-oro-claro); /* CTA sobre fondo azul */
--btn-accent-text: var(--ap-azul-cumbre);
--btn-accent-bg-hover: #E4CDA5;
/* ---------- 3. Tipografía ---------- */
--font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Escala fluida (móvil → escritorio). Base 17px */
--fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); /* 40 → 72px */
--fs-h1: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem); /* 34 → 56px */
--fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* 28 → 40px */
--fs-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); /* 22 → 28px */
--fs-h4: 1.25rem; /* 20px */
--fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
--fs-body: 1.0625rem; /* 17px */
--fs-small: 0.9375rem; /* 15px */
--fs-caption: 0.8125rem; /* 13px */
--fs-overline:0.75rem; /* 12px, mayúsculas espaciadas */
--lh-tight: 1.12;
--lh-heading: 1.2;
--lh-body: 1.6;
--ls-overline: 0.22em;
--ls-heading: -0.015em;
--ls-caps: 0.08em;
/* ---------- 4. Espaciado (base 4px, ritmo 8px) ---------- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 */
--space-10: 8rem; /* 128 */
--section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
/* ---------- 5. Layout ---------- */
--container-max: 1200px;
--container-narrow: 760px;
--gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
--grid-columns: 12;
/* ---------- 6. Forma ---------- */
--radius-xs: 2px;
--radius-sm: 4px; /* botones, inputs */
--radius-md: 8px; /* tarjetas */
--radius-lg: 16px; /* bloques grandes, imágenes */
--radius-pill: 999px;
--border-width: 1px;
--rule-accent-width: 48px; /* "línea base" dorada */
--rule-accent-height: 3px;
--angle-ascenso: 61.3deg; /* ángulo de la diagonal del isotipo */
/* ---------- 7. Elevación (sobria, sin sombras pesadas) ---------- */
--shadow-1: 0 1px 2px rgba(14, 42, 71, 0.06), 0 1px 1px rgba(14, 42, 71, 0.04);
--shadow-2: 0 6px 20px -6px rgba(14, 42, 71, 0.16);
--shadow-3: 0 18px 40px -12px rgba(14, 42, 71, 0.22);
/* ---------- 8. Movimiento ---------- */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 450ms;
/* ---------- 9. Imagen ---------- */
--image-overlay: linear-gradient(180deg, rgba(14, 42, 71, 0) 30%, rgba(14, 42, 71, 0.85) 100%);
--image-duotone-dark: #0E2A47;
--image-duotone-light: #8CB9DC;
}
/* ---------- Tema oscuro (secciones invertidas o modo oscuro del sistema) ---------- */
.theme-dark,
[data-theme="dark"] {
--color-bg: var(--ap-azul-cumbre);
--color-bg-alt: #0A2038;
--color-bg-soft: #163A5E;
--color-surface: #132F4E;
--color-text: #E8EEF4;
--color-text-muted: #B9C7D6;
--color-heading: var(--ap-blanco);
--color-accent: var(--ap-oro-claro);
--color-accent-text: var(--ap-oro-claro);
--color-link: var(--ap-celeste-horizonte);
--color-link-hover: var(--ap-blanco);
--color-border: rgba(255, 255, 255, 0.14);
--color-focus: var(--ap-celeste-horizonte);
--btn-primary-bg: var(--ap-oro-claro);
--btn-primary-text: var(--ap-azul-cumbre);
--btn-primary-bg-hover:#E4CDA5;
--btn-secondary-text: var(--ap-blanco);
--btn-secondary-border:rgba(255, 255, 255, 0.6);
}