/* ============================================================= Atinio — Design System (fonte única de verdade) GERADO de apps/mobile/tailwind.config.js e apps/broker/tailwind.config.js. Não edite à mão: rode o export do repo. Última geração a partir do código em produção do monorepo Atinio (Fluire LTDA). Duas marcas, um sistema. A ÚNICA divergência é a família `accent`: Investidor (apps/mobile) = bordô #7A1F2B Broker (apps/broker) = azul #1B3A8F Tudo o mais — superfícies, texto, status, bordas, tipo, raios, spacing — é idêntico nos dois apps. Uso: ou data-brand="broker" para o modo escuro ============================================================= */ /* ---------- Fontes ---------- */ @font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Satoshi'; src: url('fonts/Satoshi-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; } /* Playfair Display e IBM Plex Mono vêm do Google Fonts: https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap */ /* ---------- Cores · Investidor (bordô) — default ---------- */ :root, [data-brand='investor'] { --color-background: #F4F1EA; --color-background-2: #ECE7DB; --color-surface: #FFFFFF; --color-surface-2: #F8F5EE; --color-surface-3: #E8E3D6; --color-surface-glass: rgba(255,255,255,0.62); --color-surface-glass-strong: rgba(255,255,255,0.78); --color-surface-alt: #F8F5EE; --color-text-primary: #0A1A2F; --color-text-secondary: #3F4E63; --color-text-muted: #586473; --color-text-muted-2: #586473; --color-accent: #7A1F2B; --color-accent-fill: #7A1F2B; --color-accent-2: #952636; --color-accent-soft: #F0DCDF; --color-accent-glow: rgba(122, 31, 43, 0.16); --color-success: #1F5C3A; --color-success-soft: #DDEAE0; --color-warning: #B6831A; --color-warning-soft: #F2E6CC; --color-warning-strong: #7A5912; --color-danger: #B33A2A; --color-danger-soft: #F2D9D4; --color-border: #E0DCCD; --color-border-2: #D0CAB6; --color-border-strong: #B5AE96; --color-hairline: rgba(10, 26, 47, 0.08); --color-inverted-text: #FFFFFF; } /* O app usa NativeWind com darkMode:'class' — daí .dark ser o seletor canônico. [data-theme=dark] é aceito como alias pra mocks estáticos. */ [data-brand='investor'].dark, [data-brand='investor'][data-theme='dark'], .dark, [data-theme='dark'] { --color-surface: #141E2E; --color-surface-2: #18223A; --color-surface-3: #1F2B43; --color-text-primary: #F0EBDD; --color-text-secondary: #B5BDCB; --color-text-muted: #7A849A; --color-accent: #D98190; --color-accent-fill: #C8475C; --color-accent-2: #E0596E; --color-accent-soft: #2A1119; --color-border: #243043; --color-border-2: #324158; --color-border-strong: #3F516B; --color-background: #0B1220; --color-background-2: #0F1828; } /* ---------- Cores · Broker (azul Serhant) ---------- */ [data-brand='broker'] { --color-background: #F4F1EA; --color-background-2: #ECE7DB; --color-surface: #FFFFFF; --color-surface-2: #F8F5EE; --color-surface-3: #E8E3D6; --color-surface-glass: rgba(255,255,255,0.62); --color-surface-glass-strong: rgba(255,255,255,0.78); --color-surface-alt: #F8F5EE; --color-text-primary: #0A1A2F; --color-text-secondary: #3F4E63; --color-text-muted: #586473; --color-text-muted-2: #586473; --color-accent: #1B3A8F; --color-accent-fill: #1B3A8F; --color-accent-2: #274BA8; --color-accent-soft: #DAE0F2; --color-accent-glow: rgba(27, 58, 143, 0.16); --color-success: #1F5C3A; --color-success-soft: #DDEAE0; --color-warning: #B6831A; --color-warning-soft: #F2E6CC; --color-warning-strong: #7A5912; --color-danger: #B33A2A; --color-danger-soft: #F2D9D4; --color-border: #E0DCCD; --color-border-2: #D0CAB6; --color-border-strong: #B5AE96; --color-hairline: rgba(10, 26, 47, 0.08); --color-inverted-text: #FFFFFF; } [data-brand='broker'].dark, [data-brand='broker'][data-theme='dark'] { --color-surface: #141E2E; --color-surface-2: #18223A; --color-surface-3: #1F2B43; --color-text-primary: #F0EBDD; --color-text-secondary: #B5BDCB; --color-text-muted: #7A849A; --color-accent: #8FA6E8; --color-accent-fill: #5271D2; --color-accent-2: #7691E0; --color-accent-soft: #0E1838; --color-border: #243043; --color-border-2: #324158; --color-border-strong: #3F516B; --color-background: #0B1220; --color-background-2: #0F1828; } /* ---------- Raios ---------- */ /* sharp (x-*) = dados e chips editoriais · soft (c-*) = containers */ :root { --radius-x-1: 2px; --radius-x-2: 4px; --radius-x-3: 6px; --radius-c-1: 8px; --radius-c-2: 14px; --radius-c-3: 20px; --radius-c-4: 28px; --radius-pill: 9999px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; } /* ---------- Spacing (múltiplos de 4) ---------- */ :root { --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: 56px; --space-12: 48px; --space-16: 64px; --space-24: 96px; } /* ---------- Escala tipográfica ---------- */ /* Playfair Display: display, h1, section-head, pull-quote (único italic) Satoshi: corpo e UI — NUNCA italic IBM Plex Mono: TODOS os números financeiros, sempre tabular-nums */ .text-display { font-family: 'Playfair Display', Georgia, serif; font-size: 38px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; } .text-h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; } .text-section-head { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; } .text-h2 { font-family: 'Satoshi', system-ui, sans-serif; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; } .text-h3 { font-family: 'Satoshi', system-ui, sans-serif; font-size: 15px; line-height: 20px; font-weight: 600; } .text-body { font-family: 'Satoshi', system-ui, sans-serif; font-size: 15px; line-height: 23px; font-weight: 400; } .text-sm { font-family: 'Satoshi', system-ui, sans-serif; font-size: 13px; line-height: 20px; font-weight: 400; } .text-caption { font-family: 'Satoshi', system-ui, sans-serif; font-size: 12px; line-height: 17px; font-weight: 400; } .text-eyebrow { font-family: 'Satoshi', system-ui, sans-serif; font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .text-smallcaps { font-family: 'Satoshi', system-ui, sans-serif; font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .text-dateline { font-family: 'Satoshi', system-ui, sans-serif; font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.12em; } .text-byline { font-family: 'Satoshi', system-ui, sans-serif; font-size: 13px; line-height: 18px; font-weight: 500; } .text-pull-quote { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; line-height: 24px; font-weight: 500; font-style: italic; } .text-mono-xl { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 44px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .text-mono-l { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 28px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .text-mono-m { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 18px; line-height: 21px; font-weight: 600; font-variant-numeric: tabular-nums; } .text-mono-s { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; line-height: 17px; font-weight: 500; font-variant-numeric: tabular-nums; } .text-mono-xs { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; line-height: 14px; font-weight: 500; font-variant-numeric: tabular-nums; } /* ---------- Base ---------- */ body { margin: 0; background: var(--color-background); color: var(--color-text-primary); font-family: 'Satoshi', system-ui, sans-serif; font-size: 15px; line-height: 23px; -webkit-font-smoothing: antialiased; } /* ---------- Botões ---------- */ /* Espelha apps/mobile/components/Button.tsx: pill (999), Satoshi-Bold no primary/danger e Satoshi-Medium no secondary/ghost, opacity .5 no disabled. md = 20/12 · sm = 16/8. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 20px; font-family: 'Satoshi', system-ui, sans-serif; font-size: 15px; line-height: 23px; font-weight: 700; cursor: pointer; } .btn--sm { padding: 8px 16px; font-size: 13px; line-height: 20px; } .btn--full { width: 100%; } .btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: default; } .btn--primary { background: var(--color-accent-fill); color: var(--color-inverted-text); } .btn--danger { background: var(--color-danger); color: var(--color-inverted-text); } .btn--secondary { background: var(--color-surface); color: var(--color-accent); border: 1px solid var(--color-accent); font-weight: 500; } .btn--ghost { background: transparent; color: var(--color-accent); font-weight: 500; } /* IconButton — 'filled' é o ícone num círculo de surface (size + 20). */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--color-text-secondary); } .icon-btn--filled { width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); } /* ---------- Superfícies ---------- */ /* Opacas — sem glass em produto. */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-c-2); padding: var(--space-4); } .card--flat { background: var(--color-surface-2); border-color: transparent; } .hero { border-radius: var(--radius-c-3); padding: var(--space-5); color: var(--color-inverted-text); background: linear-gradient(160deg, var(--color-accent-fill), var(--color-accent-2)); } /* ---------- Badges / chips ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; line-height: 17px; font-weight: 500; } .badge--accent { background: var(--color-accent-soft); color: var(--color-accent); } .badge--success { background: var(--color-success-soft); color: var(--color-success); } .badge--warning { background: var(--color-warning-soft); color: var(--color-warning-strong); } .badge--danger { background: var(--color-danger-soft); color: var(--color-danger); } /* ---------- Marcadores editoriais ---------- */ .eyebrow { color: var(--color-text-muted); } .dateline { color: var(--color-text-muted); } .disclaimer { color: var(--color-text-muted); font-size: 11px; line-height: 15px; border-top: 1px solid var(--color-hairline); padding-top: var(--space-2); } /* ---------- Skeleton (loading = skeleton, nunca spinner de tela) ---------- */ .skeleton { background: var(--color-surface-3); border-radius: var(--radius-x-2); animation: skeleton-pulse 1.4s ease-in-out infinite; } @keyframes skeleton-pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } } /* ---------- Motion ---------- */ /* ease-out, sem overshoot. 120ms toque · 200ms transição · 320ms entrada. */ :root { --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-ease: cubic-bezier(0.2, 0, 0, 1); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }