/* ============================================================ MIRADOR DE LA RIVERA — Design Tokens BrandBook V.2026 · Sumáq Pacha SAC ============================================================ */ /* ---- Webfont: Fontshare Gilroy (Principal) ---- Se carga desde el de index.html con + preconnect: un @import aquí encadena las descargas y bloquea el primer render. */ :root { /* ============ COLOR — PRINCIPAL (BrandBook V.2026) ============ Colores oficiales extraídos del BrandBook. Verde Principal · Azul Medianoche · Gris Estructural · Off White */ --mr-verde-bosque: #00A551; /* Verde corporativo principal */ --mr-verde-bosque-deep: #172E3A; /* Profundo — texto sobre verde (ahora azul medianoche) */ --mr-verde-vivo: #4BAD73; /* Verde medio secundario */ --mr-verde-sostenible: #4BAD73; /* = verde-medio */ --mr-azul-medianoche: #172E3A; /* Fondo oscuro · logo negativo */ --mr-gris-piedra: #7A8084; /* Gris estructural del símbolo */ /* Colores secundarios */ --mr-verde-claro: #DCE8DD; /* Verde claro secundario */ --mr-verde-medio: #4BAD73; /* Verde medio secundario */ /* Reemplazos de los tokens de oro (ahora usan tonos de marca) */ --mr-oro-noble: #00A551; /* Era: gold — ahora verde principal */ --mr-oro-suave: #DCE8DD; /* Era: gold highlight — ahora verde claro */ /* ============ COLOR — NEUTRALES ===================================== El Off-White del BrandBook (#F8F8F8) es la base luminosa. */ --mr-blanco-puro: #FFFFFF; --mr-off-white: #F8F8F8; /* BrandBook off-white oficial */ --mr-arena: #DCE8DD; /* Card / panel — light mode */ --mr-niebla: #DCE8DD; /* Hover surface — light mode (ahora verde claro) */ --mr-grafito-50: rgba(122,128,132, 0.2); /* Border hairline — light (Gris piedra con opacidad) */ --mr-grafito-200: #7A8084; /* Muted text — usa gris estructural */ --mr-grafito-400: #7A8084; /* Secondary text — light (ahora gris piedra) */ --mr-grafito-900: #172E3A; /* Primary text — azul medianoche */ /* ============ COLOR — DARK MODE SURFACES =========================== Modo oscuro = Azul Medianoche del BrandBook. */ --mr-noche: #172E3A; /* App background — dark (BrandBook) */ --mr-noche-superficie: rgba(248,248,248, 0.03); /* Surface — dark (Off-white con opacidad) */ --mr-noche-card: rgba(248,248,248, 0.06); /* Card / panel — dark (Off-white con opacidad) */ --mr-noche-card-hover: rgba(248,248,248, 0.1); /* Off-white con opacidad */ --mr-noche-borde: rgba(248,248,248, 0.15); /* Off-white con opacidad */ --mr-noche-texto-2: #DCE8DD; /* = verde claro */ --mr-noche-texto-3: #7A8084; /* = gris estructural */ /* ============ COLOR — SEMÁNTICO ===================================== Solo paleta de marca BrandBook. Sin naranja, rojo ni azul ajeno. */ --mr-success: #4BAD73; /* verde medio */ --mr-aviso: #7A8084; /* gris estructural — avisos */ /* ============ SEMANTIC TOKENS — LIGHT (default) =================== Apply [data-theme-mode="dark"] on a wrapper to flip. */ --bg-app: var(--mr-off-white); --bg-surface: var(--mr-blanco-puro); --bg-card: var(--mr-arena); --bg-card-hover: var(--mr-niebla); --border: var(--mr-grafito-50); --fg-1: var(--mr-grafito-900); /* Primary text */ --fg-2: var(--mr-grafito-400); /* Secondary */ --fg-3: var(--mr-grafito-200); /* Muted */ --accent: var(--mr-verde-bosque); /* Verde principal */ --accent-2: var(--mr-azul-medianoche); /* Medianoche */ --accent-3: var(--mr-verde-vivo); /* Verde medio */ /* ============ TIPOGRAFÍA ============================================= Gilroy (Principal): titulares, logotipo, headings. Segoe UI (Secundaria): cuerpo de texto y piezas informativas. */ --font-display: 'Gilroy', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Type scale */ --t-display: 700 clamp(2.75rem, 5vw, 4.5rem)/1.05 var(--font-display); --t-h1: 700 clamp(2.25rem, 3.6vw, 3.25rem)/1.1 var(--font-display); --t-h2: 700 clamp(1.75rem, 2.6vw, 2.25rem)/1.15 var(--font-display); --t-h3: 600 1.5rem/1.25 var(--font-display); --t-h4: 600 1.15rem/1.3 var(--font-display); --t-eyebrow: 700 0.78rem/1.2 var(--font-display); --t-lead: 400 1.125rem/1.55 var(--font-body); --t-body: 400 1rem/1.6 var(--font-body); --t-small: 400 0.875rem/1.55 var(--font-body); --t-caption: 500 0.75rem/1.4 var(--font-body); /* Letter-spacing */ --tracking-tight: -0.02em; --tracking-eyebrow: 0.12em; /* ============ SPACING (4-pt rhythm) ================================ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ============ RADII ================================================= */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* ============ ELEVATION ============================================= Sombras usando el azul medianoche (23,46,58). */ --shadow-1: 0 1px 2px rgba(23, 46, 58, 0.08); --shadow-2: 0 8px 24px rgba(23, 46, 58, 0.10); --shadow-3: 0 16px 48px rgba(23, 46, 58, 0.14); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.4); /* ============ MOTION ================================================ */ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-natural: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 150ms; --dur-base: 280ms; --dur-slow: 520ms; /* ============ GRADIENTS ============================================ Grad-gold: verde principal → verde claro (antes era oro → marfil). Grad-bosque: medianoche → profundo. Grad-leaf: verde medio → verde principal. */ --grad-gold: linear-gradient(135deg, var(--mr-verde-bosque) 0%, var(--mr-verde-medio) 100%); --grad-bosque: linear-gradient(135deg, var(--mr-azul-medianoche) 0%, var(--mr-verde-bosque-deep) 100%); --grad-leaf: linear-gradient(135deg, var(--mr-verde-sostenible) 0%, var(--mr-verde-vivo) 100%); } /* ============ DARK MODE ================================================ Activate by setting [data-theme-mode="dark"] on / wrapper. */ [data-theme-mode="dark"] { --bg-app: var(--mr-noche); --bg-surface: var(--mr-noche-superficie); --bg-card: var(--mr-noche-card); --bg-card-hover: var(--mr-noche-card-hover); --border: var(--mr-noche-borde); --fg-1: #F8F8F8; --fg-2: var(--mr-noche-texto-2); --fg-3: var(--mr-noche-texto-3); --shadow-1: 0 2px 8px rgba(0,0,0,0.5); --shadow-2: 0 8px 24px rgba(0,0,0,0.7); --shadow-3: 0 16px 48px rgba(0,0,0,0.8); } /* ============ SEMANTIC HTML BINDINGS ================================= */ body { font: var(--t-body); color: var(--fg-1); background: var(--bg-app); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font: var(--t-h1); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h2 { font: var(--t-h2); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h3 { font: var(--t-h3); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h4 { font: var(--t-h4); color: var(--fg-1); } p { font: var(--t-body); color: var(--fg-2); text-wrap: pretty; } small { font: var(--t-caption); color: var(--fg-3); } .eyebrow { font: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); } .display { font: var(--t-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .lead { font: var(--t-lead); color: var(--fg-2); text-wrap: pretty; max-width: 60ch; }