/* ================================================================ FDM Theme — Design System (Etapa 1) Carregue ANTES de style2.css para que os tokens sejam herdados. ================================================================ */ :root { /* ===== Backgrounds (escala neutra) ===== */ --bg-0: #0e0e10; /* canvas */ --bg-1: #15151a; /* surface */ --bg-2: #1c1c22; /* card */ --bg-3: #27272f; /* card hover, popovers */ --bg-elevated: #1f1f25; /* modais, sheets */ --bg-overlay: rgba(0, 0, 0, .55); /* ===== Texto ===== */ --text-1: #f4f4f5; /* primário (não branco puro) */ --text-2: #a1a1aa; /* secundário */ --text-3: #71717a; /* terciário, placeholder, disabled */ --text-inverse: #18181b; /* ===== Borda ===== */ --border-1: #27272f; /* sutil */ --border-2: #3f3f46; /* hover, focus */ /* ===== Marca + funcional ===== */ --brand: #000000; --brand-hover: #525252; --brand-soft: rgba(97, 97, 97, .12); --danger: #ef4444; --danger-hover: #dc2626; --warning: #f59e0b; --info: #3b82f6; /* ===== Cifra ===== */ --cifra-chord: #fb923c; --cifra-refrao: #00ff00; --cifra-prerefrao: #00e5ff; --cifra-ponte: #ff6b6b; --cifra-section-bg: rgba(16, 185, 129, .06); --cifra-section-border: rgba(16, 185, 129, .35); /* ===== Tipografia ===== */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --cifra-size: 18px; --cifra-leading: 1.6; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ===== Espaçamento (escala de 4) ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ===== Bordas e raios ===== */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ===== Métricas ===== */ --touch-target: 44px; --header-height: 56px; --bottom-bar-height: 56px; /* ===== Sombras (parcimônia) ===== */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .25); --shadow-2: 0 4px 12px rgba(0, 0, 0, .35); --shadow-3: 0 12px 32px rgba(0, 0, 0, .5); /* ===== Z-index ===== */ --z-header: 100; --z-bottom-bar: 90; --z-sidemenu: 1000; --z-modal: 9999; --z-toast: 99998; /* ===== Transições ===== */ --t-fast: 120ms ease; --t-base: 180ms ease; } /* Tema claro (ativado via [data-theme="light"] no ) */ :root[data-theme="light"] { --bg-0: #fafafa; --bg-1: #f4f4f5; --bg-2: #ffffff; --bg-3: #e4e4e7; --bg-elevated: #ffffff; --bg-overlay: rgba(0, 0, 0, .35); --text-1: #18181b; --text-2: #52525b; --text-3: #a1a1aa; --text-inverse: #fafafa; --border-1: #e4e4e7; --border-2: #d4d4d8; --cifra-chord: #ea580c; --cifra-refrao: #008800; --cifra-prerefrao: #0088aa; --cifra-ponte: #cc2222; --cifra-section-bg: rgba(16, 185, 129, .08); --cifra-section-border: rgba(16, 185, 129, .4); --shadow-1: 0 1px 2px rgba(0, 0, 0, .06); --shadow-2: 0 4px 12px rgba(0, 0, 0, .08); --shadow-3: 0 12px 32px rgba(0, 0, 0, .12); } /* Tema automático respeitando preferência do sistema */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg-0: #fafafa; --bg-1: #f4f4f5; --bg-2: #ffffff; --bg-3: #e4e4e7; --text-1: #18181b; --text-2: #52525b; --text-3: #a1a1aa; --border-1: #e4e4e7; --border-2: #d4d4d8; } } /* ===== Reset suave ===== */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.5; color: var(--text-1); background: var(--bg-0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ===== Tipografia utilitária ===== */ .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-muted { color: var(--text-2); } .text-faint { color: var(--text-3); } .font-medium { font-weight: var(--fw-medium); } .font-semibold { font-weight: var(--fw-semibold); } .font-bold { font-weight: var(--fw-bold); } .font-mono { font-family: var(--font-mono); } /* ===== Sistema de botões ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid transparent; font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: 1; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); text-decoration: none; white-space: nowrap; user-select: none; } .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn--primary { background: var(--brand); color: #fff; } .btn--primary:hover:not(:disabled) { background: var(--brand-hover); } .btn--secondary { background: var(--bg-2); color: var(--text-1); border-color: var(--border-1); } .btn--secondary:hover:not(:disabled) { background: var(--bg-3); border-color: var(--border-2); } .btn--ghost { background: transparent; color: var(--text-1); } .btn--ghost:hover:not(:disabled) { background: var(--bg-2); } .btn--danger { background: var(--danger); color: #fff; } .btn--danger:hover:not(:disabled) { background: var(--danger-hover); } .btn--icon { width: var(--touch-target); padding: 0; } .btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-xs); } .btn--block { width: 100%; } /* ===== Compatibilidade com Bootstrap antigo (não quebrar telas existentes) ===== */ .btn-primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; min-height: var(--touch-target); border-radius: var(--radius-sm); } .btn-primary:hover, .btn-primary:focus { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; color: #fff !important; } /* ===== Inputs ===== */ .input, input[type="text"]:not(.unstyled), input[type="search"]:not(.unstyled), input[type="password"]:not(.unstyled), input[type="email"]:not(.unstyled), input[type="number"]:not(.unstyled), input[type="date"]:not(.unstyled), input[type="text"]:not(.unstyled), select:not(.unstyled), textarea:not(.unstyled) { min-height: var(--touch-target); padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text-1); border: 1px solid var(--border-1); font-family: inherit; font-size: var(--text-base); transition: border-color var(--t-fast); } textarea:not(.unstyled) { padding: var(--space-3); line-height: 1.5; } .input:focus, input:not(.unstyled):focus, select:not(.unstyled):focus, textarea:not(.unstyled):focus { outline: none; border-color: var(--brand); } input::placeholder, textarea::placeholder { color: var(--text-3); } /* ===== Card ===== */ .card { background: var(--bg-2); border-radius: var(--radius-md); border: 1px solid var(--border-1); padding: var(--space-4); } /* ===== Chip / pill ===== */ .chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--bg-2); color: var(--text-2); font-size: var(--text-sm); font-weight: var(--fw-medium); border: 1px solid var(--border-1); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); white-space: nowrap; } .chip:hover { background: var(--bg-3); color: var(--text-1); } .chip[aria-pressed="true"], .chip--active { background: var(--brand); color: #fff; border-color: var(--brand); } /* ===== List item ===== */ .list { list-style: none; padding: 0; margin: 0; } .list-item { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-1); color: var(--text-1); text-decoration: none; cursor: pointer; transition: background var(--t-fast); } .list-item:hover { background: var(--bg-2); } .list-item__content { flex: 1; min-width: 0; } .list-item__title { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-1); line-height: 1.3; } .list-item__meta { font-size: var(--text-xs); color: var(--text-2); margin-top: 2px; line-height: 1.3; } .list-item__icon { color: var(--text-2); flex-shrink: 0; } .list-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; } .list-item__dot--offline { background: var(--brand); } /* ===== Sync indicator ===== */ .sync-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); vertical-align: middle; } .sync-dot--online { background: var(--green); } .sync-dot--syncing { background: var(--warning); animation: fdmPulse 1.5s ease-in-out infinite; } .sync-dot--offline { background: var(--text-3); } .sync-dot--error { background: var(--danger); } @keyframes fdmPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ===== Skeleton loader ===== */ .skeleton { background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%); background-size: 200% 100%; animation: fdmSkeleton 1.4s linear infinite; border-radius: var(--radius-sm); } @keyframes fdmSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ===== Empty state ===== */ .empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-2); } .empty-state__icon { font-size: 48px; margin-bottom: var(--space-3); opacity: .6; display: block; } .empty-state__title { font-size: var(--text-lg); color: var(--text-1); margin: 0 0 var(--space-2); font-weight: var(--fw-semibold); } .empty-state__desc { margin: 0 0 var(--space-4); font-size: var(--text-sm); } /* ===== Foco acessível ===== */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ===== Reduce motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===== Safe area insets (iPhones com notch) ===== */ .safe-area-top { padding-top: env(safe-area-inset-top); } .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }