/* ════════════════════════════════════════════════════════════════════ DRY 2040 · Design Tokens ────────────────────────────────────────────────────────────────── Versión 2.0 · Mayo 2026 Preparado por MorgansMedia para Sociedad de Servicios Contenedores Ro-Ma Ltda. USO ─── Importa este archivo al inicio de tu hoja de estilos principal: @import url('dry2040-tokens.css'); O en JS frameworks (Next.js, etc): import './dry2040-tokens.css'; Luego usa las variables en cualquier selector: .my-button { background: var(--dry-azul); color: var(--dry-blanco); font-family: var(--dry-font-display); padding: var(--dry-space-3) var(--dry-space-6); border-radius: var(--dry-radius-md); } COMPATIBILIDAD ────────────── - Chrome 49+, Firefox 31+, Safari 9.1+, Edge 16+ - Para soporte IE11, transpila con PostCSS + cssnano + custom-properties ════════════════════════════════════════════════════════════════════ */ :root { /* ═══ COLORES · PALETA PRINCIPAL ════════════════════════════════ El azul DRY 2040 es el protagonista absoluto del sistema visual. El Faena (naranja) es un acento estratégico: NUNCA debe ocupar más del 5% de la composición visual. Reservado a CTAs, badges Estrella, y micro-acentos de jerarquía. */ --dry-azul: #0169A7; /* Primario · institucional · brand */ --dry-azul-profundo: #014E7D; /* Hover, active, headers oscuros */ --dry-azul-tinte: #E6F1F8; /* Fondos tonales, sidebar light */ --dry-faena: #D9742F; /* Acento ≤5% · CTAs · badge Estrella */ --dry-faena-profundo: #B45A1E; /* Hover/active de Faena */ --dry-faena-tinte: #FCEBDC; /* Highlights muy ligeros */ /* ═══ COLORES · NEUTROS (slate, no warm gray) ═════════════════ Importante: usamos cool slate, NO warm gray. Mantiene la sobriedad operacional del sistema. */ --dry-tinta: #0F172A; /* Texto principal · headers · máxima jerarquía */ --dry-texto: #1F2937; /* Body text estándar */ --dry-texto-sec: #4B5563; /* Captions, helper text, labels secundarios */ --dry-texto-terc: #94A3B8; /* Texto desactivado, placeholders */ --dry-borde: #CBD5E1; /* Bordes, dividers estándar */ --dry-borde-fuerte: #94A3B8; /* Bordes con énfasis */ --dry-fondo-claro: #F1F5F9; /* Backgrounds tonales, sections */ --dry-blanco: #FFFFFF; /* Default background */ /* ═══ COLORES · ESTADOS FUNCIONALES ═══════════════════════════ Para feedback de UI: validación, alertas, confirmaciones. */ --dry-success: #16A34A; /* Confirmación, validación OK */ --dry-success-tinte: #DCFCE7; /* Fondo de success */ --dry-warning: #D97706; /* Advertencia (no usar Faena para esto) */ --dry-warning-tinte: #FEF3C7; /* Fondo de warning */ --dry-danger: #DC2626; /* Error, eliminar */ --dry-danger-tinte: #FEE2E2; /* Fondo de error */ --dry-info: #0369A1; /* Informativo (distinguible del primario) */ --dry-info-tinte: #DBEAFE; /* Fondo de info */ /* ═══ TIPOGRAFÍA ══════════════════════════════════════════════ Inter para todo lo visual. JetBrains Mono solo para datos técnicos (dimensiones, números de cotización, código). IMPORTANTE: para email NO uses Inter (no se renderiza en muchos clientes). Usa el fallback de sistema. */ --dry-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --dry-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --dry-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* ═══ ESCALA TIPOGRÁFICA (ratio 1.25) ═════════════════════════ Modular scale type. Cada paso es 1.25× el anterior. Si necesitas un tamaño intermedio, prefiere el más cercano. */ --dry-text-h1: 4rem; /* 64px · Hero principal */ --dry-text-h2: 2.5rem; /* 40px · Titulares de sección */ --dry-text-h3: 1.75rem; /* 28px · Sub-titulares */ --dry-text-h4: 1.25rem; /* 20px · Encabezados de bloque */ --dry-text-lead: 1.125rem; /* 18px · Párrafo introductorio */ --dry-text-body: 1rem; /* 16px · Texto general */ --dry-text-small: 0.875rem; /* 14px · Captions, helper */ --dry-text-caption: 0.75rem; /* 12px · Labels, metadata */ --dry-text-eyebrow: 0.6875rem;/* 11px · Pretítulos de sección (bold + uppercase) */ /* Pesos */ --dry-weight-regular: 400; --dry-weight-medium: 500; --dry-weight-semibold: 600; --dry-weight-bold: 700; --dry-weight-black: 900; /* Line heights */ --dry-leading-tight: 1.1; /* Hero text, headers grandes */ --dry-leading-snug: 1.25; /* H2, H3 */ --dry-leading-normal: 1.5; /* Body text */ --dry-leading-relaxed: 1.75; /* Long-form reading */ /* Letter spacing */ --dry-tracking-tight: -0.02em; /* Hero, H1 */ --dry-tracking-normal: 0; --dry-tracking-wide: 0.05em; /* Eyebrows, uppercase labels */ --dry-tracking-wider: 0.1em; /* All-caps badges */ /* ═══ SPACING SCALE (4-base) ══════════════════════════════════ Todos los paddings, márgenes y gaps son múltiplos de 4px. Genera consistencia y predictibilidad visual. */ --dry-space-0: 0; --dry-space-1: 0.25rem; /* 4px */ --dry-space-2: 0.5rem; /* 8px */ --dry-space-3: 0.75rem; /* 12px */ --dry-space-4: 1rem; /* 16px */ --dry-space-5: 1.25rem; /* 20px */ --dry-space-6: 1.5rem; /* 24px */ --dry-space-8: 2rem; /* 32px */ --dry-space-10: 2.5rem; /* 40px */ --dry-space-12: 3rem; /* 48px */ --dry-space-16: 4rem; /* 64px */ --dry-space-20: 5rem; /* 80px */ --dry-space-24: 6rem; /* 96px */ /* ═══ RADIOS DE ESQUINA ═══════════════════════════════════════ 4 niveles + full (pill). NO usar valores intermedios. */ --dry-radius-none: 0; --dry-radius-sm: 0.25rem; /* 4px · Botones, inputs */ --dry-radius-md: 0.5rem; /* 8px · Cards, badges */ --dry-radius-lg: 0.75rem; /* 12px · Cards mayores */ --dry-radius-xl: 1rem; /* 16px · Hero containers */ --dry-radius-2xl: 1.5rem; /* 24px · Modales */ --dry-radius-full: 9999px; /* Pills, chips, avatares circulares */ /* ═══ SOMBRAS ═════════════════════════════════════════════════ 4 niveles de elevación. Usar sparingly: la marca DRY 2040 es flat-first. Sombras solo cuando aportan jerarquía real. */ --dry-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --dry-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04); --dry-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.04); --dry-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04); /* ═══ TRANSICIONES ════════════════════════════════════════════ */ --dry-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --dry-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --dry-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* ═══ BREAKPOINTS (referencia · usar en media queries) ════════ Estos NO son variables CSS utilizables en @media queries directamente. Son referencia para developers. */ /* sm: 640px Mobile landscape, tablet portrait md: 768px Tablet portrait grande lg: 1024px Tablet landscape, desktop pequeño xl: 1280px Desktop estándar 2xl: 1536px Desktop wide */ /* ═══ CONTAINER ═══════════════════════════════════════════════ */ --dry-container-sm: 640px; --dry-container-md: 768px; --dry-container-lg: 1024px; --dry-container-xl: 1216px; --dry-container-2xl: 1280px; /* Max-width recomendado del sitio */ --dry-container-padding-mobile: 1rem; /* 16px en mobile */ --dry-container-padding-tablet: 1.25rem; /* 20px en tablet */ --dry-container-padding-desktop: 2rem; /* 32px en desktop */ /* ═══ Z-INDEX (escala documentada) ═════════════════════════════ */ --dry-z-base: 1; --dry-z-dropdown: 1000; --dry-z-sticky: 1020; --dry-z-fixed: 1030; --dry-z-overlay: 1040; --dry-z-modal: 1050; --dry-z-popover: 1060; --dry-z-tooltip: 1070; --dry-z-toast: 1080; } /* ════════════════════════════════════════════════════════════════════ UTILIDADES OPCIONALES ────────────────────────────────────────────────────────────────── Estas no son obligatorias. Borra esta sección si tu sistema usa Tailwind o tienes utilidades propias. ════════════════════════════════════════════════════════════════════ */ /* Tipografía base recomendada para body */ body { font-family: var(--dry-font-body); font-size: var(--dry-text-body); line-height: var(--dry-leading-normal); color: var(--dry-texto); background: var(--dry-blanco); } /* Eyebrow (pretítulo de sección) */ .dry-eyebrow { font-size: var(--dry-text-eyebrow); font-weight: var(--dry-weight-bold); letter-spacing: var(--dry-tracking-wider); text-transform: uppercase; color: var(--dry-azul); } /* Tagline canónica */ .dry-tagline { font-weight: var(--dry-weight-bold); } .dry-tagline strong { color: var(--dry-faena); } /* HTML recomendado:

Garantizamos el contenedor. Y la operación.

*/ /* ════════════════════════════════════════════════════════════════════ FIN · dry2040-tokens.css Si necesitas extender estos tokens, créa un archivo aparte (ej: dry2040-overrides.css) en lugar de modificar este. ════════════════════════════════════════════════════════════════════ */