/* =====================================================================
Mitrol Design System — colors_and_type.css
Source: mitrol/theme.css + mitrol/config.yaml + PPT Base 1 (Poppins)
PERF: se eliminó el @import de Google Fonts. Cargar las fuentes desde un
@import obliga al browser a descargar y parsear este CSS antes de siquiera
descubrir fonts.googleapis.com (cadena bloqueante de 3 saltos). Ahora las
fuentes se piden con +
directo en el del HTML, en paralelo con este archivo.
===================================================================== */
:root {
/* -------- BRAND / PRIMARY ----------------------------------------- */
--mitrol-primary: #084AF3; /* Deep blue — hero, buttons, H2 */
--mitrol-primary-hov: #0636B8; /* Hover / pressed primary */
--mitrol-accent: #084AF3; /* Unificado con primary (violet eliminado) */
--mitrol-accent-hov: #0636B8; /* Unificado con primary-hov */
--mitrol-dark: #0A1128; /* Deep navy for H1 / strong text */
--mitrol-tint: #E6EEFE; /* Deep-blue tint — callouts, chips */
--mitrol-tint-2: #F2F6FF; /* Softer blue tint — subtle cards */
/* -------- NEUTRAL TEXT -------------------------------------------- */
--fg-1: #101218; /* Primary text / display */
--fg-2: #1E293B; /* Body text */
--fg-3: #475569; /* Secondary / supporting */
--fg-4: #94A3B8; /* Muted / captions / dividers */
--fg-inv: #FFFFFF; /* Text on primary/accent fills */
/* -------- SURFACES ------------------------------------------------ */
--bg: #FFFFFF;
--bg-soft: #F8FAFC; /* Subtle section alt */
--bg-muted: #F1F5F9; /* Inline code, chips */
--bg-tint: #E6EEFE; /* Deep-blue tint — callouts, chapter accents */
--bg-tint-2: #F2F6FF; /* Softer blue tint — embed, subtle cards */
--bg-dark: #0A1128; /* Deep-navy hero / footer / code */
/* -------- BORDER / DIVIDERS --------------------------------------- */
--border: #E2E8F0;
--border-strong: #CBD5E1;
--border-on-dark: rgba(255,255,255,0.12);
/* -------- SEMANTIC / STATE --------------------------------------- */
--success: #22C55E;
--success-bg: #F0FDF4;
--warning: #F59E0B;
--warning-bg: #FFF7ED;
--info: #3B82F6;
--info-bg: #EFF6FF;
--danger: #EF4444;
--danger-bg: #FEF2F2;
/* -------- ELEVATION / SHADOW ------------------------------------- */
--shadow-xs: 0 1px 2px rgba(16,18,24,0.05);
--shadow-sm: 0 1px 3px rgba(16,18,24,0.08), 0 1px 2px rgba(16,18,24,0.04);
--shadow-md: 0 4px 12px rgba(16,18,24,0.08), 0 2px 4px rgba(16,18,24,0.04);
--shadow-lg: 0 16px 40px rgba(16,18,24,0.10), 0 4px 12px rgba(16,18,24,0.06);
--shadow-brand: 0 12px 32px rgba(8,74,243,0.28);
/* -------- RADIUS -------------------------------------------------- */
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 20px;
--radius-pill: 999px;
/* -------- SPACING (4px base) ------------------------------------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
/* -------- TYPE FAMILIES ------------------------------------------ */
--font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Fira Code', 'SF Mono', 'Cascadia Code', ui-monospace, monospace;
/* -------- TYPE SCALE (web) --------------------------------------- */
/* Poppins is generally used in Light (300) for running text and
SemiBold (600) / Bold (700) for emphasis. ExtraLight (200) only
for footnotes. H1 in decks uses SemiBold. */
--fs-xs: 12px;
--fs-sm: 14px;
--fs-base: 16px;
--fs-md: 18px;
--fs-lg: 20px;
--fs-xl: 24px;
--fs-2xl: 32px;
--fs-3xl: 40px;
--fs-4xl: 56px;
--fs-5xl: 72px;
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-normal: 1.5;
--lh-loose: 1.65;
--ls-tight: -0.02em;
--ls-normal: 0;
--ls-wide: 0.04em;
--ls-caps: 0.12em;
/* -------- MOTION -------------------------------------------------- */
--ease-out: cubic-bezier(.22,.61,.36,1);
--ease-in-out: cubic-bezier(.65,.05,.36,1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
}
/* =====================================================================
Base element defaults (semantic variables)
===================================================================== */
html, body {
font-family: var(--font-sans);
font-weight: 300; /* Poppins Light is the brand default */
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--fg-2);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--fg-1);
line-height: var(--lh-snug);
margin: 0;
}
h1 { font-size: var(--fs-4xl); font-weight: 600; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); font-weight: 600; color: var(--mitrol-primary); }
h3 { font-size: var(--fs-xl); font-weight: 500; }
h4 { font-size: var(--fs-md); font-weight: 500; color: var(--fg-3); }
h5 { font-size: var(--fs-base);font-weight: 600; }
h6 { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--fg-3); }
p {
margin: 0 0 var(--sp-4);
color: var(--fg-2);
font-weight: 300;
}
small, .caption { font-size: var(--fs-xs); color: var(--fg-4); font-weight: 300; }
.eyebrow {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--mitrol-primary);
}
a {
color: var(--mitrol-primary);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--mitrol-accent); text-decoration: underline; }
code, kbd, samp {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--bg-muted);
padding: 1px 5px;
border-radius: var(--radius-xs);
color: var(--fg-1);
}
::selection { background: var(--mitrol-primary); color: var(--fg-inv); }