/* ============================================================ VIVIO DESIGN SYSTEM — Colors & Typography Influence, made easier ============================================================ */ /* Alata se sirve desde Google Fonts (WOFF2, ~15 KB) igual que el resto de la familia tipográfica. Aquí había un @font-face que la declaraba de nuevo apuntando a fonts/Alata-Regular.ttf: 106 KB duplicados en toda visita. Y debajo había un @import pidiendo a Google las mismas familias que ya solicita el del de cada página. Además de duplicar la descarga, un @import se resuelve en serie —hay que bajar este archivo antes de descubrirlo—, así que retrasaba el primer pintado. */ /* ============================================================ COLOR TOKENS — Base Palette ============================================================ */ :root { /* === BLACKS & NEUTRALS === */ --black-100: #0a0a0a; /* deepest background */ --black-90: #111111; /* main app background */ --black-80: #161616; /* sidebar / nav */ --black-70: #1e1e1e; /* card surface */ --black-60: #252525; /* elevated card */ --black-50: #2e2e2e; /* hover surface */ --black-40: #3a3a3a; /* border / divider */ --black-30: #555555; /* subtle border */ --black-20: #888888; /* muted icon */ --black-10: #b0b0b0; /* placeholder text */ /* === VIVIO YELLOW — Primary Accent === */ --yellow-vivid: #ffe600; /* pure VIVIO yellow — CTAs, active */ --yellow-bright: #ffd700; /* slightly warm yellow */ --yellow-mid: #f5c800; /* hover state of yellow */ --yellow-deep: #e6a800; /* pressed / deep yellow */ --yellow-amber: #f0a500; /* gradient bottom / warmth */ --yellow-glow: rgba(255, 230, 0, 0.18); /* glow overlay */ --yellow-subtle: rgba(255, 230, 0, 0.08); /* tinted surface */ --yellow-border: rgba(255, 230, 0, 0.25); /* yellow-tinted border */ /* === WHITES & TEXT === */ --white-100: #ffffff; --white-90: #f5f5f5; --white-80: #e8e8e8; --white-60: #c4c4c4; --white-40: #909090; /* === SEMANTIC — STATUS COLORS === */ --success-bg: #0d2b1a; --success-border: #1a5c37; --success-text: #3dd68c; --warning-bg: #2a1e00; --warning-border: #5c4200; --warning-text: #f5b800; /* close to yellow brand */ --error-bg: #2a0d0d; --error-border: #5c1a1a; --error-text: #f06060; --info-bg: #0d1a2a; --info-border: #1a3d5c; --info-text: #60b0f0; /* === GRADIENTS === */ --gradient-yellow: linear-gradient(135deg, #ffe600 0%, #f0a500 100%); --gradient-yellow-vertical: linear-gradient(180deg, #ffe600 0%, #f0a500 100%); --gradient-dark: linear-gradient(180deg, #161616 0%, #0a0a0a 100%); --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(255,230,0,0.15) 0%, transparent 70%); /* ============================================================ TYPOGRAPHY TOKENS ============================================================ */ /* Font families */ --font-display: 'Bebas Neue', 'Alata', sans-serif; --font-ui: 'Alata', 'DM Sans', sans-serif; --font-body: 'DM Sans', 'Alata', sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; /* Font sizes — base scale (1rem = 16px) */ --text-xs: 0.6875rem; /* 11px — micro labels */ --text-sm: 0.75rem; /* 12px — table cells, captions */ --text-base: 0.875rem; /* 14px — body default */ --text-md: 1rem; /* 16px — emphasized body */ --text-lg: 1.125rem; /* 18px — subheadings */ --text-xl: 1.375rem; /* 22px — card titles */ --text-2xl: 1.75rem; /* 28px — section headers */ --text-3xl: 2.25rem; /* 36px — page headings */ --text-4xl: 3rem; /* 48px — display medium */ --text-5xl: 4rem; /* 64px — display large */ --text-6xl: 6rem; /* 96px — hero / editorial */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.4; --leading-relaxed:1.6; --leading-loose: 1.8; /* Letter spacings */ --tracking-tight: -0.03em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.06em; --tracking-wider: 0.1em; --tracking-widest: 0.18em; /* Font weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* ============================================================ SPACING TOKENS ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 128px; /* ============================================================ BORDER RADIUS ============================================================ */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ============================================================ SHADOWS & ELEVATION ============================================================ */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 4px 12px rgba(0,0,0,0.6); --shadow-lg: 0 8px 32px rgba(0,0,0,0.7); --shadow-xl: 0 16px 48px rgba(0,0,0,0.8); --shadow-yellow: 0 0 24px rgba(255,230,0,0.2), 0 0 8px rgba(255,230,0,0.12); --shadow-yellow-strong: 0 0 40px rgba(255,230,0,0.35), 0 0 12px rgba(255,230,0,0.2); /* ============================================================ SEMANTIC ALIASES — Surface / FG / Border ============================================================ */ --bg-app: var(--black-90); --bg-base: var(--black-100); --bg-surface: var(--black-70); --bg-elevated: var(--black-60); --bg-hover: var(--black-50); --bg-overlay: rgba(10,10,10,0.85); --fg-primary: var(--white-100); --fg-secondary: var(--white-60); --fg-muted: var(--white-40); --fg-accent: var(--yellow-vivid); --fg-inverted: var(--black-90); --border-base: var(--black-40); --border-subtle: var(--black-30); --border-accent: var(--yellow-border); --border-bright: var(--yellow-vivid); } /* ============================================================ SEMANTIC TYPOGRAPHY CLASSES ============================================================ */ .display-hero { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: var(--weight-regular); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-primary); } .display-large { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-regular); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-primary); } .display-medium { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-regular); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-primary); } h1, .h1 { font-family: var(--font-ui); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--fg-primary); } h2, .h2 { font-family: var(--font-ui); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--fg-primary); } h3, .h3 { font-family: var(--font-ui); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-normal); color: var(--fg-primary); } h4, .h4 { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-normal); color: var(--fg-primary); } p, .body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg-secondary); } .body-sm { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg-secondary); } .label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); } .label-sm { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-muted); } .stat { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--yellow-vivid); } .caption { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--fg-muted); } code, .code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--yellow-mid); background: var(--yellow-subtle); padding: 2px 6px; border-radius: var(--radius-xs); } /* ============================================================ UTILITY — Accent text ============================================================ */ .text-accent { color: var(--yellow-vivid); } .text-primary { color: var(--fg-primary); } .text-secondary { color: var(--fg-secondary); } .text-muted { color: var(--fg-muted); } /* ============================================================ GLOBAL RESETS (dark-first) ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background-color: var(--bg-app); color: var(--fg-primary); font-family: var(--font-body); font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }