/** * Mercado na Prática — Design System * * Variáveis, cores, tipografia e utilitários base. * Light mode padrão, Dark mode via classe .dark-mode no */ /* ============================================ GOOGLE FONTS ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================ CSS CUSTOM PROPERTIES (VARIÁVEIS) ============================================ */ :root { /* --- Cores Primárias --- */ --color-primary: #0F3460; --color-primary-light: #1A4B8C; --color-primary-dark: #0A2340; --color-secondary: #00B894; --color-secondary-light: #55EFC4; --color-secondary-dark: #009B7D; /* --- Cores de Estado --- */ --color-positive: #10B981; --color-positive-bg: rgba(16, 185, 129, 0.1); --color-negative: #EF4444; --color-negative-bg: rgba(239, 68, 68, 0.1); --color-warning: #F59E0B; --color-warning-bg: rgba(245, 158, 11, 0.1); --color-info: #3B82F6; --color-info-bg: rgba(59, 130, 246, 0.1); /* --- Fundos --- */ --bg-body: #F5F7FA; --bg-card: #FFFFFF; --bg-card-hover: #F9FAFB; --bg-header: #FFFFFF; --bg-ticker: #0F3460; --bg-footer: #111827; --bg-input: #FFFFFF; --bg-code: #F3F4F6; /* --- Texto --- */ --text-primary: #1A1F36; --text-secondary: #6B7280; --text-tertiary: #9CA3AF; --text-inverse: #FFFFFF; --text-link: #0F3460; --text-link-hover: #00B894; /* --- Bordas --- */ --border-color: #E5E7EB; --border-color-light: #F3F4F6; --border-color-focus: #0F3460; /* --- Sombras --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* --- Tipografia --- */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; /* --- Espaçamento --- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* --- Bordas --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* --- Transições --- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; /* --- Z-Index --- */ --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-modal: 400; --z-tooltip: 500; /* --- Container --- */ --container-max: 1280px; --container-padding: var(--space-6); } /* ============================================ DARK MODE ============================================ */ html.dark-mode { --bg-body: #0F1117; --bg-card: #1A1D2E; --bg-card-hover: #232640; --bg-header: #141625; --bg-ticker: #0A0C14; --bg-footer: #0A0C14; --bg-input: #1A1D2E; --bg-code: #232640; --text-primary: #F9FAFB; --text-secondary: #9CA3AF; --text-tertiary: #6B7280; --text-link: #3B82F6; --text-link-hover: #34D399; --border-color: #2D3148; --border-color-light: #232640; --border-color-focus: #3B82F6; --color-primary: #3B82F6; --color-primary-light: #60A5FA; --color-secondary: #34D399; --color-secondary-light: #6EE7B7; --color-positive: #34D399; --color-positive-bg: rgba(52, 211, 153, 0.15); --color-negative: #F87171; --color-negative-bg: rgba(248, 113, 113, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4); } /* ============================================ RESET / BASE ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-primary); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--bg-body); transition: background-color var(--transition-base), color var(--transition-base); min-height: 100vh; } a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--text-link-hover); } img { max-width: 100%; height: auto; display: block; } button { cursor: pointer; font-family: inherit; border: none; background: none; } input, select, textarea { font-family: inherit; font-size: inherit; } table { border-collapse: collapse; width: 100%; } ul, ol { list-style: none; } /* ============================================ CONTAINER ============================================ */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } /* ============================================ GRID SYSTEM ============================================ */ .grid { display: grid; gap: var(--space-6); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-6 { grid-template-columns: repeat(6, 1fr); } @media (max-width: 1199px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } .grid-6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-6 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } .grid-6 { grid-template-columns: 1fr; } } /* ============================================ TIPOGRAFIA ============================================ */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: var(--leading-tight); color: var(--text-primary); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } .text-mono { font-family: var(--font-mono); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-center { text-align: center; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* ============================================ CORES DE VARIAÇÃO (ALTA/BAIXA) ============================================ */ .change-positive { color: var(--color-positive) !important; } .change-negative { color: var(--color-negative) !important; } .change-neutral { color: var(--text-secondary) !important; } .bg-positive { background-color: var(--color-positive-bg); color: var(--color-positive); } .bg-negative { background-color: var(--color-negative-bg); color: var(--color-negative); } /* ============================================ UTILITÁRIOS ============================================ */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .w-full { width: 100%; } .hidden { display: none !important; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================ ANIMAÇÕES ============================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-fade-in { animation: fadeIn 0.5s ease forwards; } .animate-fade-up { animation: fadeUp 0.5s ease forwards; } .animate-slide-down { animation: slideDown 0.3s ease forwards; } .skeleton { background: linear-gradient(90deg, var(--border-color) 25%, var(--border-color-light) 50%, var(--border-color) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md); }