/* ============================================================================ Málaga & Housing — Design tokens ---------------------------------------------------------------------------- Fuente única de verdad para colores, tipografía, radios, sombras y espaciado. Cambiar aquí propaga a todas las sub-apps que consumen este archivo. Filosofía de paleta (2026): - Teal mediterráneo profundo como color primario (frío, "el mar") - Ocre del logo como accent cálido (identidad de marca, CTAs importantes) - Neutros ligeramente cálidos (crema/piedra) — NO grises fríos - Verde oscuro del logo como texto principal — ancla la paleta - Contraste WCAG AA garantizado en todas las combinaciones Referencias validadas: - Airbnb: Babu teal + Rausch coral (patrón "trust color + warm CTA") - WGSN Color del año 2026: "Transformative Teal" + "Amber Haze" - Coloro/Recursion Agency 2026 — teal profundo + acentos cálidos Uso desde una sub-app: .mi-boton { background: var(--color-brand-primary); border-radius: var(--radius-md); } ============================================================================ */ :root { /* ── COLORES DE MARCA ────────────────────────────────────────────────────── Teal mediterráneo profundo. NO es el teal-500 estándar de Tailwind (#14B8A6) porque en 2026 ese tono lee como "template genérico". Este es más oscuro y desaturado — "sea-glass" / Aegean deep. */ --color-brand-primary: #0F6070; /* Aegean deep teal — botones, headers */ --color-brand-primary-hover: #0A4A57; /* Teal más oscuro — hover */ --color-brand-primary-bright: #14818F; /* Teal más claro — focus rings, iconos activos */ --color-brand-primary-tint: #E6EFF0; /* Teal muy suave — hover de filas, selecciones */ /* ── ACENTO CÁLIDO (del logo) ──────────────────────────────────────────────── Ocre directamente del logo Málaga & Housing. Uso restringido — reservar para CTAs importantes, badges destacados, elementos activos. Regla 60-30-10: 60% neutros, 30% teal, 10% ocre. */ --color-accent: #B8843A; /* Ocre del logo */ --color-accent-hover: #A67230; /* Ocre más oscuro */ --color-accent-bright: #D19E52; /* Ocre más claro — sobre fondos oscuros */ --color-accent-tint: #F5EBD9; /* Ocre muy suave — badges, highlights */ /* ── SUPERFICIES ────────────────────────────────────────────────────────── Neutros ligeramente cálidos (piedra caliza mediterránea). Evitamos gris frío (#F5F5F5, #EEE) que compite con el ocre. */ --color-bg-page: #F6F5F1; /* fondo de página — cálido pero neutro */ --color-bg-surface: #FFFFFF; /* tarjetas, contenedores */ --color-bg-surface-alt: #FAF9F5; /* tarjetas secundarias, alternado de filas */ --color-bg-cream: #F1EAD8; /* crema del logo — secciones cálidas destacadas */ --color-bg-hover: #F1F0EB; /* hover sobre filas */ /* ── TEXTO ───────────────────────────────────────────────────────────────── Verde oscuro del logo como texto principal — ancla la paleta y evita el gris "código de barras" genérico. */ --color-text-primary: #3A4033; /* verde oscuro del logo */ --color-text-secondary: #5C6259; /* verde-gris — subtítulos */ --color-text-muted: #8A8F84; /* muted — metadatos, hints */ --color-text-on-brand: #FFFFFF; /* sobre teal primario */ --color-text-on-accent: #FFFFFF; /* sobre ocre */ /* ── BORDES ──────────────────────────────────────────────────────────────── Warm-tinted, sutiles. Menos "línea de tabla Excel", más "papel". */ --color-border-subtle: #EAEAE4; /* separadores suaves */ --color-border-default: #D6D6CE; /* inputs, bordes normales */ --color-border-strong: #B8B8AE; /* separadores marcados */ /* ── ESTADOS SEMÁNTICOS ───────────────────────────────────────────────────── Deliberadamente NO neón. Olivo, terracota, ocre — encajan con el logo. */ --color-success: #5A7F3F; /* verde olivo natural */ --color-success-dark: #3F5A2C; --color-success-bg: #EDF3E4; --color-success-border: #C8D6B5; --color-danger: #B8493A; /* terracota — no rojo Bootstrap */ --color-danger-dark: #8B3629; --color-danger-bg: #F5E1DD; --color-danger-border: #E5B5AC; --color-warning: #B8843A; /* usa el ocre = coherencia con marca */ --color-warning-dark: #8B6329; --color-warning-bg: #F5EBD9; --color-warning-border: #E5CFA0; --color-info: #0F6070; /* usa el teal primario */ --color-info-dark: #0A4A57; --color-info-bg: #E6EFF0; --color-info-border: #B5D0D5; /* ── TIPOGRAFÍA ──────────────────────────────────────────────────────────── Sans system stack (rendimiento — ni una web font descargada). Serif Georgia disponible para acentos (títulos hero, logo mark), universal y elegante sin descarga. */ --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-serif: Georgia, 'Times New Roman', serif; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Escala tipográfica mobile-first — base 14px, no 16 (más denso en móvil). */ --font-size-xs: 11px; /* captions, badges */ --font-size-sm: 12px; /* metadatos */ --font-size-base: 14px; /* body por defecto (mobile-first) */ --font-size-md: 15px; /* body en desktop */ --font-size-lg: 16px; /* énfasis, botones grandes */ --font-size-xl: 18px; /* subtítulos */ --font-size-2xl: 22px; /* headings sección */ --font-size-3xl: 28px; /* headings página */ --font-size-4xl: 36px; /* hero, greetings */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-loose: 1.65; /* ── RADIOS ───────────────────────────────────────────────────────────────── Redondeo moderado. Ni cuadrado (obsoleto) ni "iOS burbuja" (>16px). 10-14px es el sweet spot 2026 para PWAs. */ --radius-sm: 6px; /* chips pequeños, badges */ --radius-md: 10px; /* botones estándar, inputs */ --radius-lg: 14px; /* tarjetas (grid tiles) */ --radius-xl: 18px; /* modales, tarjetas hero */ --radius-pill: 999px; /* badges tipo pill */ /* ── SOMBRAS ──────────────────────────────────────────────────────────────── Tintadas con el primary (no negro puro) para integrarse. Suaves. Tendencia 2026: sombras casi imperceptibles + bordes finos. */ --shadow-xs: 0 1px 2px rgba(15, 96, 112, 0.05); --shadow-sm: 0 1px 3px rgba(15, 96, 112, 0.06), 0 1px 2px rgba(15, 96, 112, 0.04); --shadow-md: 0 4px 12px rgba(15, 96, 112, 0.08), 0 2px 4px rgba(15, 96, 112, 0.05); --shadow-lg: 0 12px 32px rgba(15, 96, 112, 0.12), 0 4px 8px rgba(15, 96, 112, 0.06); --shadow-header: 0 1px 0 rgba(15, 96, 112, 0.08); --shadow-tooltip: 0 8px 24px rgba(58, 64, 51, 0.18); /* ── ESPACIADO (grid 4px) ────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── LAYOUT ───────────────────────────────────────────────────────────────── Anchos de contenedor para grid responsive mobile-first. */ --width-content: 680px; /* prosa, formularios */ --width-app: 1200px; /* dashboards */ --width-mobile: 480px; /* frame móvil */ /* ── MOTION ───────────────────────────────────────────────────────────────── Duraciones cortas — nada de animaciones "año 2013" que retrasan la UI. */ --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1); /* ── Z-INDEX ────────────────────────────────────────────────────────────── */ --z-content: 1; --z-sticky: 15; --z-header: 100; --z-drawer: 200; --z-modal: 500; --z-tooltip: 999; } /* ============================================================================ DARK MODE Activación automática por preferencia del sistema. Se puede forzar añadiendo data-theme="dark" al elemento raíz (permite toggle manual). ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-brand-primary: #14818F; --color-brand-primary-hover: #1CA0B0; --color-brand-primary-bright: #4FBAC7; --color-brand-primary-tint: #164B58; --color-accent: #D19E52; --color-accent-hover: #E0B471; --color-accent-bright: #F0C88A; --color-accent-tint: #3A2E1D; --color-bg-page: #0F1614; --color-bg-surface: #1A211D; --color-bg-surface-alt: #242C27; --color-bg-cream: #2E2820; --color-bg-hover: #2A322C; --color-text-primary: #E8E5D6; --color-text-secondary: #B5B3A6; --color-text-muted: #7F7D72; --color-text-on-brand: #F6F5F1; --color-text-on-accent: #1A1410; --color-border-subtle: #2A322C; --color-border-default: #3D4640; --color-border-strong: #5A6559; --color-success: #7FA860; --color-success-bg: #1E2A18; --color-danger: #D96856; --color-danger-bg: #2E1A15; --color-warning: #D19E52; --color-warning-bg: #2E2618; --color-info: #14818F; --color-info-bg: #16323A; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.4); } } /* Toggle manual: — gana sobre la media query */ :root[data-theme="dark"] { --color-brand-primary: #14818F; --color-brand-primary-hover: #1CA0B0; --color-brand-primary-bright: #4FBAC7; --color-brand-primary-tint: #164B58; --color-accent: #D19E52; --color-accent-hover: #E0B471; --color-accent-bright: #F0C88A; --color-accent-tint: #3A2E1D; --color-bg-page: #0F1614; --color-bg-surface: #1A211D; --color-bg-surface-alt: #242C27; --color-bg-cream: #2E2820; --color-bg-hover: #2A322C; --color-text-primary: #E8E5D6; --color-text-secondary: #B5B3A6; --color-text-muted: #7F7D72; --color-text-on-brand: #F6F5F1; --color-text-on-accent: #1A1410; --color-border-subtle: #2A322C; --color-border-default: #3D4640; --color-border-strong: #5A6559; --color-success: #7FA860; --color-success-bg: #1E2A18; --color-danger: #D96856; --color-danger-bg: #2E1A15; --color-warning: #D19E52; --color-warning-bg: #2E2618; --color-info: #14818F; --color-info-bg: #16323A; } /* ============================================================================ BASE UTILITY — Reset + defaults mínimos Opcional: importar desde cada app si quieres arrancar con base coherente. ============================================================================ */ .mah-reset, .mah-reset *, .mah-reset *::before, .mah-reset *::after { box-sizing: border-box; margin: 0; padding: 0; } .mah-reset { font-family: var(--font-family-sans); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text-primary); background: var(--color-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }