/* ============================================================ MODOINGENIA — DESIGN TOKENS V2 ============================================================ Sistema oficial de identidad visual de ModoIngenia. Extraído del Brand Book V2 (Claude Design Anthropic Labs, 2026-05-06). Familia estética: Editorial Minimalism (referencias: Linear, Stripe, Vercel). USO: 1. Importar este archivo en cualquier proyecto: o en CSS: @import url("tokens.css"); 2. Usar las variables en lugar de hardcodear valores: .button-primary { background: var(--gold-500); color: var(--n-50); border-radius: var(--r-btn); box-shadow: var(--sh-1); } 3. Para cambiar la identidad visual (ej. ajustar el dorado), modificar SOLO este archivo. Todos los proyectos que lo importen se actualizan automáticamente. DEPENDENCIAS DE FUENTES (Google Fonts — cargar en HTML): ============================================================ */ :root { /* ============================================================ PALETA — GOLD (primario) Origen: #F5C842 (V1 saturado) → desaturado a base premium editorial. 11 shades para uso completo (50 = más claro, 950 = más oscuro). Base operativa: gold-500. ============================================================ */ --gold-50: hsl(45 60% 96%); --gold-100: hsl(45 65% 91%); --gold-200: hsl(45 65% 82%); --gold-300: hsl(45 62% 70%); --gold-400: hsl(45 58% 60%); --gold-500: hsl(43 55% 53%); /* BASE — premium editorial, no gaming */ --gold-600: hsl(40 52% 45%); --gold-700: hsl(36 50% 36%); --gold-800: hsl(32 45% 27%); --gold-900: hsl(28 40% 18%); --gold-950: hsl(28 35% 11%); /* ============================================================ PALETA — NEUTRALES TINTED WARM Subtono cálido (hue 28-45) — NUNCA grises puros fríos. Reflejan warmth subliminal sin romper Editorial Minimalism. ============================================================ */ --n-50: hsl(45 14% 98%); --n-100: hsl(42 12% 95%); --n-200: hsl(40 10% 90%); --n-300: hsl(38 8% 81%); --n-400: hsl(36 6% 64%); --n-500: hsl(34 5% 48%); --n-600: hsl(32 6% 38%); --n-700: hsl(30 7% 28%); --n-800: hsl(28 8% 18%); --n-900: hsl(28 10% 11%); --n-950: hsl(28 12% 6%); /* ============================================================ ACCENTS SEMÁNTICOS Solo para estados — NO usar como color de marca. ============================================================ */ --red: hsl(2 70% 50%); /* destructive · errores · acciones peligrosas */ --yellow: hsl(38 80% 50%); /* warning · advertencias */ --green: hsl(150 45% 38%); /* success · confirmaciones */ --blue: hsl(214 70% 45%); /* info · neutralidad informativa */ /* ============================================================ ALIAS SEMÁNTICOS (uso UI) Apuntar a estos en componentes — no a las primitivas directamente. Esto permite tema light/dark sin tocar componentes. ============================================================ */ --bg: var(--n-50); --ink: var(--n-900); --muted: var(--n-500); --rule: hsla(28 10% 11% / 0.08); /* ============================================================ TIPOGRAFÍA - Display (Inter Tight): titles, headlines, hero (peso 500) - Body (Inter): párrafos, lectura larga (peso 400) - Mono (Geist Mono): code, datos técnicos, micro-meta - Serif (Fraunces): SOLO opcional para warmth en momentos puntuales ============================================================ */ --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace; --font-serif: "Fraunces", "Times New Roman", serif; /* ============================================================ ESCALA TIPOGRÁFICA Geométrica, no random. Base: 16px (1rem). Línea 1.05 para titles, 1.5 para body. ============================================================ */ --fs-12: 12px; /* mono micro · captions */ --fs-14: 14px; /* small · labels */ --fs-16: 16px; /* body base */ --fs-20: 20px; /* lead · subtitulos */ --fs-24: 24px; /* h3 */ --fs-30: 30px; /* h2 */ --fs-36: 36px; /* h1 secundario */ --fs-48: 48px; /* h1 principal */ --fs-60: 60px; /* display */ --fs-72: 72px; /* hero display */ /* ============================================================ SPACING SYSTEM (8pt baseline) Escala geométrica para padding/margin/gap. ============================================================ */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px; /* page padding default */ --pad: 80px; /* alias para page padding */ /* ============================================================ BORDER-RADIUS — variado por contexto NO usar 8px universal en todo (anti-slop "look AI genérico"). ============================================================ */ --r-chip: 4px; /* tags, chips, badges pequeños */ --r-btn: 8px; /* botones, inputs, cards pequeñas */ --r-card: 12px; /* cards, paneles, secciones medianas */ --r-hero: 24px; /* módulos hero, hero sections, modales grandes */ /* ============================================================ GRID SYSTEM 12 columnas responsive. Gutter 24, margin 80, max-width 1440. ============================================================ */ --grid-cols: 12; --grid-gutter: 24px; --grid-margin: 80px; --grid-max: 1440px; /* ============================================================ SOMBRAS — TWO-LAYER + LIGHT FROM TOP Sistema de elevación coherente. NUNCA sombras simétricas planas. ============================================================ */ --sh-1: 0 1px 0 hsla(28 12% 6% / .04), 0 1px 2px hsla(28 12% 6% / .06); /* resting */ --sh-2: 0 1px 0 hsla(28 12% 6% / .05), 0 4px 12px -2px hsla(28 12% 6% / .08); /* raised */ --sh-3: 0 1px 0 hsla(28 12% 6% / .06), 0 12px 32px -8px hsla(28 12% 6% / .14); /* floating */ } /* ============================================================ TEMA OSCURO (opcional) Si necesitas dark mode, descomenta y aplica clase .dark al body. ============================================================ */ /* .dark { --bg: var(--n-950); --ink: var(--n-100); --muted: var(--n-400); --rule: hsla(45 14% 98% / 0.10); } */ /* ============================================================ RESET BÁSICO RECOMENDADO (opcional) ============================================================ */ /* *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); font-size: var(--fs-16); line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.025em; line-height: 1.05; margin: 0; } .mono { font-family: var(--font-mono); } */