/**
* FONT SYSTEM - Sistema Robusto de Tipografia
* Fallbacks profissionais e otimização de carregamento
* Elite Financial System v10.0
*/
/* ============================================
🎨 DESIGN #5: FONT FALLBACK SYSTEM GLOBAL
============================================ */
/* Aplicar font-display: swap globalmente */
* {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* FONT STACKS - Ordem de Prioridade */
/* Display Font (Títulos, Botões) */
.font-display,
h1, h2, h3, h4, h5, h6,
.elite-login-title-main,
.elite-nav-label,
.elite-action-title,
button[class*="elite"],
[data-font="display"] {
font-family: var(--font-display);
/* Fallback stack detalhado:
1. Orbitron (se carregou)
2. Courier New (similar monospace)
3. Roboto Mono (Google Font alternativo)
4. SF Mono (macOS/iOS)
5. Monaco (macOS antigo)
6. Consolas (Windows)
7. monospace (sistema)
*/
}
/* Body Font (Texto corrido) */
.font-body,
body,
p, span, div,
input, textarea, select,
.elite-action-subtitle,
[data-font="body"] {
font-family: var(--font-body);
/* Fallback stack detalhado:
1. Inter (se carregou)
2. -apple-system (iOS/macOS nativo)
3. BlinkMacSystemFont (Chrome em macOS)
4. Segoe UI (Windows)
5. Roboto (Android)
6. Helvetica Neue
7. Arial
8. sans-serif (sistema)
*/
}
/* ============================================
FONT LOADING STATES - Prevenir FOIT/FOUT
============================================ */
/* Enquanto fontes carregam, usar fallback sem layout shift */
.fonts-loading {
/* Usar font-synthesis para manter proporções */
font-synthesis: weight style;
}
.fonts-loaded {
/* Remover synthesis quando fonte real carregar */
font-synthesis: none;
}
/* ============================================
FONT SIZE AJUSTES - Match Optical Size
============================================ */
/* Ajustar tamanhos para compensar diferenças entre Orbitron e fallbacks */
.font-display {
/* Orbitron é mais condensado que Courier New */
letter-spacing: 0.02em; /* Aumentar espaçamento ligeiramente */
}
/* Se fallback Courier New for usado, ajustar */
@supports not (font-family: 'Orbitron') {
.font-display {
letter-spacing: 0.05em;
font-weight: 600; /* Courier New é mais fina */
}
}
/* ============================================
PRELOAD CRITICAL FONTS - Performance
============================================ */
/*
ADICIONAR NO DO HTML:
*/
/* ============================================
FONT FALLBACK METRICS - Size Adjust
============================================ */
/* Ajustar métricas de fallback para match com fontes primárias */
@font-face {
font-family: 'Orbitron Fallback';
src: local('Courier New'), local('Roboto Mono');
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 105%; /* Orbitron é 5% maior que Courier New */
}
@font-face {
font-family: 'Inter Fallback';
src: local('Arial'), local('Helvetica Neue');
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 100%; /* Inter e Arial têm métricas similares */
}
/* Aplicar fallbacks ajustados */
:root {
--font-display-with-fallback: 'Orbitron', 'Orbitron Fallback', 'Courier New', 'Roboto Mono', monospace;
--font-body-with-fallback: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
/* ============================================
RESPONSIVE FONT SCALING
============================================ */
/* Base size */
html {
font-size: 16px;
}
/* Ajustar em mobile */
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
@media (max-width: 480px) {
html {
font-size: 13px;
}
}
/* Fluid typography para títulos */
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
}
h2 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
}
h3 {
font-size: clamp(1.25rem, 3vw, 2rem);
}
/* ============================================
PRINT STYLES
============================================ */
@media print {
* {
/* Usar fonte do sistema para impressão */
font-family: Georgia, 'Times New Roman', serif !important;
color: #000 !important;
background: #fff !important;
}
}
/* ============================================
ACESSIBILIDADE - Alto Contraste
============================================ */
@media (prefers-contrast: high) {
* {
font-weight: 600 !important;
letter-spacing: 0.05em !important;
}
}
/* ============================================
DARK MODE - Font Smoothing
============================================ */
@media (prefers-color-scheme: dark) {
body {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
}
/* ============================================
VARIAÇÕES DE PESO - Orbitron
============================================ */
.font-light {
font-weight: 400;
}
.font-regular {
font-weight: 500;
}
.font-medium {
font-weight: 600;
}
.font-semibold {
font-weight: 700;
}
.font-bold {
font-weight: 800;
}
.font-extrabold {
font-weight: 900;
}
/* ============================================
UTILIDADES DE TEXTO
============================================ */
.text-balance {
text-wrap: balance; /* Melhor quebra de linha */
}
.text-pretty {
text-wrap: pretty; /* Evitar órfãos e viúvas */
}
.no-ligatures {
font-feature-settings: "liga" 0, "calt" 0;
}
.tabular-nums {
font-variant-numeric: tabular-nums; /* Números alinhados */
}
/* ============================================
DEBUGGING - Mostrar fonte em uso
============================================ */
/*
[data-debug-font]::after {
content: " [" attr(data-debug-font) "]";
font-size: 0.7em;
color: red;
font-family: monospace;
}
*/