/* * Lantio Design System — CSS Custom Properties * Source of truth: Lantio_Landing_Spec_GSD_v1.md §1 * * FONT LOADING NOTE: * Fonts are SELF-HOSTED (RGPD + performance): no third-party requests to * Google. The @font-face declarations live in styles/styles.css and load the * latin-subset .woff2 files from /fonts/ with font-display: swap. Weights: * Poppins 600 and 700 (headings); Inter 400, 500, 600 (body / interface / * tables). The two above-the-fold variants (Poppins 700, Inter 400) are * in each page . * The system-ui fallback stack in --font-heading and --font-body keeps * text visible during swap. * This file contains NO Google Fonts URL and NO font request — only the * family + fallback tokens below. */ :root { /* ========================================================= * §1.1 Color tokens * ========================================================= */ --color-primary: #007CA6; /* Botones primarios, titulares clave, enlaces activos */ --color-secondary: #52AACA; /* Acentos, iconos, degradados */ --color-tint: #CDF1FF; /* Fondos suaves, badges, franjas claras */ --color-ink: #0F2A33; /* Texto principal (gris azulado muy oscuro) */ --color-muted: #5B6B70; /* Texto secundario / microcopy */ --color-bg: #FFFFFF; /* Fondo base */ --color-bg-soft: #F5FAFC; /* Fondo de secciones alternas */ --color-border: #E2EBEF; /* Bordes de tarjetas y divisores */ --color-success: #1F9D6B; /* Checks, estados de éxito ("Factura enviada") */ --color-primary-dark: #006389; /* Hover/active state for primary buttons */ /* Degradado corporativo: CTA final, banda, sobre fondo primario */ --gradient-corporate: linear-gradient(135deg, #007CA6 0%, #52AACA 100%); /* ========================================================= * §1.2 Typography — font-family tokens * (Family + fallback stack only; no network request here) * ========================================================= */ --font-heading: 'Poppins', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* §1.2 Type-scale tokens — desktop values (reduce ~15–20 % on mobile) */ /* H1 (hero): Poppins 700, 48/56 px */ --fs-h1: 48px; --lh-h1: 56px; --fw-h1: 700; /* H2 (section title): Poppins 600, 34/42 px */ --fs-h2: 34px; --lh-h2: 42px; --fw-h2: 600; /* H3 (card title): Poppins 600, 20/28 px */ --fs-h3: 20px; --lh-h3: 28px; --fw-h3: 600; /* Body: Inter 400, 17/28 px */ --fs-body: 17px; --lh-body: 28px; --fw-body: 400; /* Microcopy: Inter 400, 14/20 px */ --fs-micro: 14px; --lh-micro: 20px; --fw-micro: 400; /* Button: Inter 600, 16 px */ --fs-btn: 16px; --fw-btn: 600; /* ========================================================= * §1.3 Spacing — 8 px base grid * ========================================================= */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; /* Section vertical padding */ --section-pad-desktop: 96px; --section-pad-mobile: 56px; /* ========================================================= * §1.3 Radii * ========================================================= */ --radius: 12px; /* Cards and standard buttons */ --radius-pill: 999px; /* CTA primary pill buttons */ /* ========================================================= * §1.3 Shadows * ========================================================= */ --shadow-card: 0 4px 16px rgba(0, 60, 90, 0.06); --shadow-card-hover: 0 8px 24px rgba(0, 60, 90, 0.10); /* ========================================================= * §1.3 Layout * ========================================================= */ --max-width: 1200px; --gutter: 24px; /* ========================================================= * §1.4 Breakpoints (documented constants — cannot drive media queries) * Use these values directly in styles.css @media rules: * Mobile : max-width: 640px * Tablet : min-width: 641px and max-width: 1024px * Desktop : min-width: 1025px * Mobile-first: base styles target mobile; expand at tablet and desktop. * ========================================================= */ /* --bp-mobile: 640px */ /* --bp-tablet: 1024px */ /* --bp-desktop: 1025px */ }