/* ============================================================================ MUNDO RESEÑAS — Design Tokens Dirección de marca: 2E · Verde & Limón "Gestión total de tu negocio en Google Maps" ---------------------------------------------------------------------------- Uso: importa este fichero una vez en el . Todos los tokens son variables CSS bajo :root. Pensado para HTML/CSS/JS vanilla + Tailwind CDN. ============================================================================ */ :root { /* ---------------------------------------------------------------- COLOR */ /* Verde — color primario (crecimiento, Google Maps) */ --mr-green-50: #ECF8F0; --mr-green-100: #D2F0DE; --mr-green-200: #A6E1BF; --mr-green-300: #6FCD98; --mr-green-400: #2FB773; --mr-green-500: #0BA463; /* verde vivo */ --mr-green-600: #0B7A4A; /* PRIMARIO — botones, enlaces, marca */ --mr-green-700: #0A6340; --mr-green-800: #0A4D33; --mr-green-900: #0C3A28; --mr-green-950: #07251A; /* Limón — acento (energía, "salta a la vista"). Úsalo con cabeza: CTA destacado, highlights, no para texto largo. Siempre tinta oscura encima. */ --mr-lime-soft: #EEF9B0; --mr-lime: #D6F23A; /* ACENTO */ --mr-lime-strong: #C2E021; /* hover/active del acento */ --mr-lime-ink: #5A6B0E; /* texto sobre fondos lima claros */ /* Tinta y neutros — cálidos, con un punto oliva para casar con el papel */ --mr-ink: #15200E; /* texto principal / casi-negro de marca */ --mr-paper: #FAFBEF; /* fondo de página */ --mr-surface: #FFFFFF; /* tarjetas, superficies elevadas */ --mr-neutral-50: #F6F7EE; --mr-neutral-100: #ECEEE0; --mr-neutral-200: #DCDFCD; --mr-neutral-300: #C2C6AF; --mr-neutral-400: #9FA587; --mr-neutral-500: #7C8366; --mr-neutral-600: #5E654B; --mr-neutral-700: #474D38; --mr-neutral-800: #2E331F; --mr-neutral-900: #15200E; /* Estado */ --mr-success: #0BA463; --mr-success-bg: #E7F6EE; --mr-warning: #D98A1F; --mr-warning-bg: #FBF0DC; --mr-danger: #D64430; --mr-danger-bg: #FBE7E2; --mr-info: #2F74C0; --mr-info-bg: #E5EFF9; /* Roles semánticos (apunta aquí desde los componentes) */ --mr-bg: var(--mr-paper); --mr-fg: var(--mr-ink); --mr-fg-muted: var(--mr-neutral-600); --mr-fg-subtle: var(--mr-neutral-500); --mr-border: var(--mr-neutral-200); --mr-border-strong: var(--mr-neutral-300); --mr-primary: var(--mr-green-600); --mr-primary-hover: var(--mr-green-700); --mr-on-primary: #FFFFFF; --mr-accent: var(--mr-lime); --mr-on-accent: var(--mr-ink); --mr-ring: color-mix(in srgb, var(--mr-green-600) 45%, transparent); /* ----------------------------------------------------------- TIPOGRAFÍA */ --mr-font-display: 'Archivo', system-ui, sans-serif; /* titulares (700–900) */ --mr-font-body: 'Hanken Grotesk', system-ui, sans-serif; /* texto */ --mr-font-serif: 'Instrument Serif', Georgia, serif; /* acento editorial, itálica */ --mr-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* etiquetas, datos, código */ /* Escala tipográfica (rem, base 16px) */ --mr-text-display: 3.75rem; /* 60 */ --mr-text-h1: 3rem; /* 48 */ --mr-text-h2: 2.25rem; /* 36 */ --mr-text-h3: 1.75rem; /* 28 */ --mr-text-h4: 1.375rem; /* 22 */ --mr-text-h5: 1.125rem; /* 18 */ --mr-text-h6: 0.9375rem; /* 15 */ --mr-text-body-lg: 1.125rem; /* 18 */ --mr-text-body: 1rem; /* 16 */ --mr-text-sm: 0.875rem; /* 14 */ --mr-text-caption: 0.8125rem; /* 13 */ --mr-text-micro: 0.6875rem; /* 11 — mono labels */ --mr-leading-tight: 1.02; --mr-leading-snug: 1.2; --mr-leading-normal: 1.5; --mr-leading-relaxed: 1.65; --mr-tracking-tight: -0.03em; /* displays Archivo Black */ --mr-tracking-normal: 0; --mr-tracking-wide: 0.08em; /* etiquetas mono mayúsculas */ --mr-tracking-wider: 0.16em; --mr-weight-regular: 400; --mr-weight-medium: 500; --mr-weight-semibold: 600; --mr-weight-bold: 700; --mr-weight-black: 900; /* --------------------------------------------------------- SPACING (4px) */ --mr-space-0: 0; --mr-space-1: 0.25rem; /* 4 */ --mr-space-2: 0.5rem; /* 8 */ --mr-space-3: 0.75rem; /* 12 */ --mr-space-4: 1rem; /* 16 */ --mr-space-5: 1.25rem; /* 20 */ --mr-space-6: 1.5rem; /* 24 */ --mr-space-8: 2rem; /* 32 */ --mr-space-10: 2.5rem; /* 40 */ --mr-space-12: 3rem; /* 48 */ --mr-space-16: 4rem; /* 64 */ --mr-space-20: 5rem; /* 80 */ --mr-space-24: 6rem; /* 96 */ --mr-space-32: 8rem; /* 128 */ /* ----------------------------------------------------------------- RADIO */ --mr-radius-xs: 4px; --mr-radius-sm: 6px; --mr-radius-md: 9px; /* botones, inputs */ --mr-radius-lg: 14px; /* tarjetas */ --mr-radius-xl: 18px; /* paneles, modales */ --mr-radius-2xl: 24px; /* secciones hero */ --mr-radius-full: 999px; /* chips, avatares, pills */ /* -------------------------------------------------------------- SOMBRAS */ /* Tintadas en verde-tierra, nunca gris azulado puro */ --mr-shadow-xs: 0 1px 2px rgba(21, 32, 14, 0.06); --mr-shadow-sm: 0 2px 6px rgba(21, 32, 14, 0.08); --mr-shadow-md: 0 8px 22px rgba(21, 32, 14, 0.10); --mr-shadow-lg: 0 16px 44px rgba(21, 32, 14, 0.12); --mr-shadow-xl: 0 28px 70px rgba(21, 32, 14, 0.16); --mr-shadow-lime: 0 10px 26px rgba(194, 224, 33, 0.45); /* glow del acento */ /* --------------------------------------------------------------- MOTION */ --mr-duration-fast: 120ms; --mr-duration-base: 200ms; --mr-duration-slow: 320ms; --mr-duration-slower: 480ms; --mr-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* la de por defecto */ --mr-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entradas */ --mr-ease-in: cubic-bezier(0.5, 0, 0.75, 0); /* salidas */ --mr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* rebote sutil */ }