/* * public/assets/_tokens.css * Propósito : Design tokens globais Firmix — tema claro/escuro. * Como usar : * Classe `.dark` no ativa o tema escuro (Alpine.js gerencia). * Dependências : Nenhuma — puro CSS custom properties. */ /* ─── Reset mínimo ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── Tokens — tema claro (padrão) ─────────────────────────── */ :root { /* Superfícies */ --bg: #f5f4f0; --bg2: #eae9e4; --bg3: #dddcd6; --surface: #ffffff; /* Tipografia */ --ink: #1a1916; --ink2: #4e4c46; --ink3: #9a9890; /* Marca */ --brand: #1a7a4a; --brand2: #e6f5ed; /* Semânticas */ --sky: #3a8fff; --sky2: #e8f2ff; --amber: #d48a10; --amber2: #fdf3e0; --red: #c93020; --red2: #fdecea; --purple: #7c3aed; --purple2: #f3efff; --green: #1a7a4a; --green2: #e6f5ed; /* UI */ --border: rgba(26, 25, 22, 0.09); --border2: rgba(26, 25, 22, 0.16); --radius: 8px; --radius-lg: 14px; --radius-xl: 20px; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04); --shadow-lg: 0 4px 12px rgba(0,0,0,.10), 0 12px 40px rgba(0,0,0,.08); /* Tipografia base */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace; --font-size-sm: 13px; --font-size-base: 15px; --font-size-lg: 17px; --line-height: 1.6; /* Espaçamentos */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Transições */ --transition: 150ms ease; --transition-slow: 250ms ease; } /* ─── Tokens — tema escuro ──────────────────────────────────── */ html.dark { --bg: #0f0e0b; --bg2: #1a1916; --bg3: #252320; --surface: #1f1e1a; --ink: #f0ede8; --ink2: #b0ada8; --ink3: #6a6760; --brand: #2a9a5e; --brand2: #0a2a1a; --sky: #5aaaff; --sky2: #0a1a2a; --amber: #e8a020; --amber2: #1a1000; --red: #e84030; --red2: #1a0800; --purple: #9a5aff; --purple2: #160a2a; --green: #2a9a5e; --green2: #0a2a1a; --border: rgba(255, 255, 255, 0.07); --border2: rgba(255, 255, 255, 0.12); --shadow: 0 1px 3px rgba(0,0,0,.20), 0 4px 16px rgba(0,0,0,.16); --shadow-lg: 0 4px 12px rgba(0,0,0,.30), 0 12px 40px rgba(0,0,0,.24); } /* ─── Base global ───────────────────────────────────────────── */ html { font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height); color: var(--ink); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition-slow), color var(--transition-slow); } body { min-height: 100vh; color: var(--ink); background-color: var(--bg); } /* ─── Componentes base reutilizáveis ───────────────────────── */ /* Cards / superfícies */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-6); } /* Botões */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px var(--space-5); border-radius: var(--radius); font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; border: none; transition: opacity var(--transition), background-color var(--transition), transform var(--transition); text-decoration: none; white-space: nowrap; user-select: none; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--brand); color: #ffffff; } .btn-primary:hover { opacity: 0.88; } .btn-secondary { background: var(--bg2); color: var(--ink); border: 1px solid var(--border2); } .btn-secondary:hover { background: var(--bg3); } .btn-danger { background: var(--red); color: #ffffff; } .btn-danger:hover { opacity: 0.88; } .btn-ghost { background: transparent; color: var(--ink2); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--bg2); } .btn-sm { padding: 6px 12px; font-size: 12px; } .btn-lg { padding: 14px 28px; font-size: var(--font-size-base); border-radius: var(--radius-lg); } /* Inputs / Selects / Textareas */ .input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], select, textarea { width: 100%; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); color: var(--ink); font-size: var(--font-size-sm); font-family: var(--font-sans); line-height: var(--line-height); transition: border-color var(--transition), box-shadow var(--transition); outline: none; appearance: none; } .input:focus, input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26, 122, 74, 0.12); } .input::placeholder, input::placeholder, textarea::placeholder { color: var(--ink3); } textarea { resize: vertical; min-height: 96px; } /* Labels */ label { display: block; font-size: var(--font-size-sm); font-weight: 500; color: var(--ink2); margin-bottom: var(--space-2); } /* Formulário — grupo */ .form-group { margin-bottom: var(--space-5); } /* Badges de status */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: .01em; } .badge-pending { background: var(--amber2); color: var(--amber); } .badge-concluded { background: var(--green2); color: var(--green); } .badge-refused { background: var(--red2); color: var(--red); } .badge-expired { background: var(--bg3); color: var(--ink3); } .badge-queued { background: var(--sky2); color: var(--sky); } .badge-error { background: var(--red2); color: var(--red); } /* Documento pronto mas sem crédito para envio — cor própria (roxo), distinta de todos os outros status para não ser confundido com "Aguardando" (que já usa âmbar) */ .badge-purple { background: var(--purple2); color: var(--purple); } /* Alert boxes */ .alert { padding: var(--space-4) var(--space-5); border-radius: var(--radius); font-size: var(--font-size-sm); border-left: 3px solid; } .alert-info { background: var(--sky2); border-color: var(--sky); color: var(--ink); } .alert-success { background: var(--green2); border-color: var(--green); color: var(--ink); } .alert-warning { background: var(--amber2); border-color: var(--amber); color: var(--ink); } .alert-error { background: var(--red2); border-color: var(--red); color: var(--ink); } /* Tabelas */ .table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); } table.firmix-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .firmix-table thead tr { background: var(--bg2); } .firmix-table th, .firmix-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .firmix-table th { font-weight: 600; color: var(--ink2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .firmix-table tbody tr:hover { background: var(--bg2); } .firmix-table tbody tr:last-child td { border-bottom: none; } /* Divisor */ .divider { border: none; border-top: 1px solid var(--border); margin: var(--space-6) 0; } /* Skeleton loader */ .skeleton { background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%); background-size: 200% 100%; animation: skeleton-shine 1.4s infinite; border-radius: var(--radius); } @keyframes skeleton-shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Spinner */ .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border2); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Utilitários de texto */ .text-brand { color: var(--brand); } .text-ink2 { color: var(--ink2); } .text-ink3 { color: var(--ink3); } .text-red { color: var(--red); } .text-green { color: var(--green); } .text-amber { color: var(--amber); } .text-center { text-align: center; } /* Scrollbar customizada (Webkit) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink3); }