/* ════════════════════════════════════════════════════════════════════════ Exorveli · Design System v3.1 (Bronze Atelier) ───────────────────────────────────────────────────────────────────────── Aprovado em 2026-05-28 via brand-exorveli.html (skill brand-visual-generator). Arquétipo híbrido Likeable Leader × Bold Builder ("papel sob lampião"). Tipografia: Fraunces (display variable) + IBM Plex Sans (body) + IBM Plex Mono Brand: Bronze Atelier #B96B1F (HSL 26/71/42) Tema: dark default, light com paridade completa USO HTML: ← default · pode trocar pra "light" data-skin="carbon" e "paper" viram aliases (mesma paleta agora) Brand sobrescritível runtime: window.tv3SetTenantBrand("#1E40AF") pra portal cliente white-label (tenant DHC azul, etc). ──────────────────────────────────────────────────────────────────────── */ /* ─── DEFAULT BRAND TOKENS · Bronze Atelier (variante B aprovada) ───────── */ :root { --brand-hex: #B96B1F; --brand-rgb: 185, 107, 31; --brand-soft-dark: #D58A45; --brand-soft-light: #9A581A; --brand-bg-dark: rgba(185, 107, 31, 0.16); --brand-bg-light: rgba(154, 88, 26, 0.10); } /* ─── DEFAULT = DARK (todas as superfícies) ─────────────────────────────── */ :root, html[data-theme="dark"], html[data-skin="carbon"], html[data-skin="paper"], html[data-skin="carbon"][data-theme="dark"], html[data-skin="paper"][data-theme="dark"] { /* Surfaces — warm "papel sob lampião" · hierarquia em 4 níveis */ --bg-page: #14110F; --bg-surface: #1E1A17; --bg-elevated: #2A241F; --bg-sunken: #100D0B; /* Text */ --text-primary: #F5F1E8; --text-secondary: #D8CFBD; --text-muted: #8A8275; --text-disabled: #4D453E; --text-inverse: #14110F; /* Borders — bege warm em vez de cinza neutro */ --border-subtle: #2A241F; --border-default: #3D332A; --border-strong: #5C4E40; /* Brand (sobrescritível runtime via tv3SetTenantBrand) */ --brand: var(--brand-hex); --brand-soft: var(--brand-soft-dark); --brand-bg: var(--brand-bg-dark); --brand-on: #14110F; /* Semantic */ --success: #6B9F71; --success-bg: rgba(107, 159, 113, 0.16); --warn: #D8A140; --warn-bg: rgba(216, 161, 64, 0.16); --danger: #D87559; --danger-bg: rgba(216, 117, 89, 0.16); --info: #7CA7B8; --info-bg: rgba(124, 167, 184, 0.16); /* Effects — assinatura "papel iluminado por dentro" */ --shadow-card: inset 0 1px 0 rgba(var(--brand-rgb), 0.04), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(var(--brand-rgb), 0.06); } /* ─── LIGHT ────────────────────────────────────────────────────────────── */ html[data-theme="light"], html[data-skin="carbon"][data-theme="light"], html[data-skin="paper"][data-theme="light"] { --bg-page: #F5F1E8; --bg-surface: #FBF8F1; --bg-elevated: #FFFFFF; --bg-sunken: #EDE6D4; --text-primary: #1C1410; --text-secondary: #4A3F35; --text-muted: #847764; --text-disabled: #C4B89F; --text-inverse: #FBF8F1; --border-subtle: #EDE6D4; --border-default: #D8CFBD; --border-strong: #A89A7E; --brand: var(--brand-soft-light); --brand-soft: var(--brand-hex); --brand-bg: var(--brand-bg-light); --brand-on: #FBF8F1; --success: #4F7A55; --success-bg: rgba(79, 122, 85, 0.10); --warn: #A6760C; --warn-bg: rgba(166, 118, 12, 0.10); --danger: #B0533A; --danger-bg: rgba(176, 83, 58, 0.10); --info: #4A7888; --info-bg: rgba(74, 120, 136, 0.10); --shadow-card: inset 0 1px 0 rgba(var(--brand-rgb), 0.06), 0 1px 3px rgba(28, 20, 16, 0.06), 0 4px 12px rgba(28, 20, 16, 0.03); --shadow-elevated: 0 12px 32px rgba(28, 20, 16, 0.12), inset 0 1px 0 rgba(var(--brand-rgb), 0.08); } /* ─── TIPOGRAFIA · Fraunces (display) + IBM Plex Sans (body) + Plex Mono ── */ :root { --font-display: 'Fraunces', 'Georgia', serif; --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; /* Aliases legados (theme.css v1/v2 usava --font-sans) */ --font-sans: var(--font-body); /* Type scale (Major Third 1.25) */ --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 60px; /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Spacing (base 8) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px; } /* ════════════════════════════════════════════════════════════════════════ RESET + BASE ──────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg-page); color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); font-feature-settings: "ss01", "ss02", "cv11"; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .25s ease, color .25s ease; } a { color: inherit; text-decoration: none; } a:hover { color: var(--brand); } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img, svg { display: block; max-width: 100%; } input, select, textarea { font-family: inherit; } ::selection { background: var(--brand-bg); color: var(--text-primary); } /* Tipografia — display = Fraunces, body = Plex Sans */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-primary); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: -0.015em; font-variation-settings: "opsz" 48, "SOFT" 50; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } h4 { font-size: var(--text-md); } h5 { font-size: var(--text-base); } h6 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-mono); font-weight: var(--weight-medium); } p { color: var(--text-secondary); } .text-mono { font-family: var(--font-mono); } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-brand { color: var(--brand); } .text-success { color: var(--success); } .text-warn { color: var(--warn); } .text-danger { color: var(--danger); } /* Label/eyebrow padrão monospace uppercase */ .eyebrow, .section-label, .metric-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } /* ════════════════════════════════════════════════════════════════════════ COMPONENTES (cards, panel, table, btn, badge, form, modal, tabs, alert) ──────────────────────────────────────────────────────────────────────── */ /* ─── Topbar genérica ─── */ .tv3-top { position: sticky; top: 0; z-index: 30; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .tv3-top-inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .tv3-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 16px; color: var(--text-primary); letter-spacing: -0.015em; min-width: 0; } .tv3-brand-logo { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--brand); color: var(--brand-on); border-radius: var(--radius-sm); overflow: hidden; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 13px; } .tv3-brand-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; } .tv3-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tv3-brand-tag { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); background: var(--brand-bg); padding: 3px 8px; border-radius: var(--radius-sm); } /* ─── Cards ─── */ .card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-card); transition: border-color .12s ease; } .card.clickable { cursor: pointer; } .card.clickable:hover, .card.hover-able:hover { border-color: var(--border-strong); } .card.accent { border-left: 3px solid var(--brand); padding-left: 15px; } .card-grid, .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .card-grid.tight, .cards.tight { gap: 10px; } .card-grid.wide, .cards.wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .metric-label { margin-bottom: 8px; } .metric-value { color: var(--text-primary); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: var(--leading-tight); margin-bottom: 4px; font-variation-settings: "opsz" 48, "SOFT" 50; } .metric-value.brand { color: var(--brand); } .metric-value.success { color: var(--success); } .metric-value.danger { color: var(--danger); } .metric-value.warn { color: var(--warn); } .metric-value .unit { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-medium); margin-left: 4px; font-family: var(--font-body); } .metric-sub { color: var(--text-muted); font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; } .metric-trend.up { color: var(--success); font-weight: var(--weight-semibold); } .metric-trend.down { color: var(--danger); font-weight: var(--weight-semibold); } /* ─── Panel (container) ─── */ .panel { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); } .panel-head { padding: 14px 20px; border-bottom: 1px solid var(--border-default); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .panel-head h2 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; font-family: var(--font-display); } .panel-head .right { display: flex; gap: 8px; align-items: center; } .panel-body { padding: 18px 20px; } .panel-empty { padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: var(--text-sm); } /* ─── Table ─── */ table.table-v3 { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } table.table-v3 thead th { text-align: left; padding: 10px 16px; color: var(--text-muted); font-weight: var(--weight-medium); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border-default); font-family: var(--font-mono); } table.table-v3 tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; } table.table-v3 tbody tr:last-child td { border-bottom: none; } table.table-v3 tbody tr:hover { background: var(--bg-sunken); } table.table-v3 td.primary { color: var(--text-primary); font-weight: var(--weight-medium); } table.table-v3 td.mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-primary); } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; transition: all .12s ease; border: 1px solid transparent; letter-spacing: 0; white-space: nowrap; user-select: none; } .btn-sm { padding: 5px 12px; font-size: 12px; } .btn-lg { padding: 11px 22px; font-size: var(--text-base); } .btn-primary, .btn-brand { background: var(--brand); color: var(--brand-on); border-color: var(--brand); font-weight: var(--weight-semibold); } .btn-primary:hover, .btn-brand:hover { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-on); } .btn-ghost { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); } .btn-ghost:hover { border-color: var(--border-strong); } .btn-danger { background: var(--bg-surface); color: var(--danger); border-color: var(--border-default); } .btn-danger:hover { border-color: var(--danger); background: var(--danger-bg); } .btn-link { background: none; border: none; color: var(--brand); padding: 4px 0; } .btn-link:hover { text-decoration: underline; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ─── Badges ─── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); font-family: var(--font-mono); letter-spacing: 0.02em; text-transform: lowercase; white-space: nowrap; } .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .badge.no-dot::before { display: none; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-warn { background: var(--warn-bg); color: var(--warn); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-info { background: var(--info-bg); color: var(--info); } .badge-neutral { background: var(--bg-sunken); color: var(--text-secondary); } .badge-brand { background: var(--brand-bg); color: var(--brand); } /* Compat: classes status do app legacy */ .badge-p1, .badge-critica, .bd-p1, .bd-critica { background: var(--danger-bg); color: var(--danger); } .badge-p2, .badge-alta, .bd-p2, .bd-alta { background: var(--warn-bg); color: var(--warn); } .badge-p3, .badge-media, .bd-p3, .bd-media { background: var(--info-bg); color: var(--info); } .badge-p4, .badge-baixa, .bd-p4, .bd-baixa { background: var(--bg-sunken); color: var(--text-muted); } .badge-aberta, .badge-aberto, .badge-online, .badge-ativo, .badge-pago, .bd-aberta, .bd-aberto, .bd-online, .bd-ativo, .bd-pago { background: var(--success-bg); color: var(--success); } .badge-em_andamento, .badge-doing, .badge-reconhecido, .bd-em_andamento, .bd-doing, .bd-reconhecido { background: var(--brand-bg); color: var(--brand); } .badge-aguardando, .badge-blocked, .badge-pendente, .bd-aguardando, .bd-blocked, .bd-pendente { background: var(--warn-bg); color: var(--warn); } .badge-fechada, .badge-resolvido, .badge-done, .bd-fechada, .bd-resolvido, .bd-done { background: var(--bg-sunken); color: var(--text-muted); } .badge-cancelada, .badge-offline, .badge-cancelado, .badge-desligado, .bd-cancelada, .bd-offline, .bd-cancelado, .bd-desligado { background: var(--danger-bg); color: var(--danger); } .badge-degradado, .badge-manutencao, .badge-afastado, .bd-degradado, .bd-manutencao, .bd-afastado { background: var(--warn-bg); color: var(--warn); } /* ─── Forms ─── */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .form-row.one { grid-template-columns: 1fr; } .form-row.three { grid-template-columns: repeat(3, 1fr); } @media (max-width: 680px) { .form-row, .form-row.three { grid-template-columns: 1fr; } } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .form-group input, .form-group select, .form-group textarea { padding: 10px 14px; background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); transition: border-color .12s, background-color .12s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--brand); background: var(--bg-elevated); } .form-group textarea { min-height: 90px; resize: vertical; } .form-group input[type=color] { height: 40px; padding: 4px; cursor: pointer; } .form-help { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ─── Modal ─── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 90; display: none; align-items: center; justify-content: center; padding: 24px; } html[data-theme="light"] .modal-backdrop { background: rgba(28, 20, 16, 0.32); } .modal-backdrop.active { display: flex; } .modal { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-elevated); } .modal.large { max-width: 880px; } .modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border-default); display: flex; justify-content: space-between; align-items: center; } .modal-head h2 { font-size: var(--text-md); font-weight: var(--weight-semibold); font-family: var(--font-display); } .modal-head .close { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 0 4px; } .modal-head .close:hover { color: var(--brand); } .modal-body { padding: 22px; } .modal-foot { padding: 14px 22px; border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: 8px; } /* ─── Tabs ─── */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-default); margin-bottom: 20px; overflow-x: auto; } .tabs::-webkit-scrollbar { display: none; } .tabs button { background: none; border: none; color: var(--text-muted); padding: 10px 16px; font-size: var(--text-sm); cursor: pointer; border-bottom: 2px solid transparent; font-weight: var(--weight-medium); font-family: var(--font-body); transition: color .12s, border-color .12s; white-space: nowrap; } .tabs button:hover { color: var(--text-primary); } .tabs button.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: var(--weight-semibold); } /* ─── Alerts ─── */ .alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: var(--leading-snug); margin-bottom: 12px; border: 1px solid transparent; } .alert.error, .alert.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } .alert.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); } .alert.success { background: var(--success-bg); color: var(--success); border-color: var(--success); } .alert.info { background: var(--info-bg); color: var(--info); border-color: var(--info); } .alert.neutral { background: var(--bg-sunken); color: var(--text-secondary); border-color: var(--border-default); } /* ─── Loading ─── */ .tv3-loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-page); z-index: 200; } .tv3-loading.hidden { display: none; } .spinner { width: 32px; height: 32px; border: 2px solid var(--border-default); border-top-color: var(--brand); border-radius: 50%; animation: tv3-spin 0.8s linear infinite; margin-bottom: 14px; } @keyframes tv3-spin { to { transform: rotate(360deg); } } .loading-text { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.10em; color: var(--text-muted); text-transform: uppercase; } /* ─── Misc utility ─── */ .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .stack { display: flex; flex-direction: column; gap: 14px; } .spacer { flex: 1; } .divider { height: 1px; background: var(--border-default); margin: 14px 0; } /* Theme toggle button (no topbar) */ .theme-toggle { background: var(--bg-sunken); border: 1px solid var(--border-default); color: var(--text-primary); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: var(--weight-medium); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color .12s; } .theme-toggle:hover { border-color: var(--border-strong); } /* ════════════════════════════════════════════════════════════════════════ LEGACY ALIASES · páginas antigas (v1/v2) usavam --off-white, --gray-800 ──────────────────────────────────────────────────────────────────────── */ :root { --off-white: var(--text-primary); --ink-deep: var(--bg-page); --dark: var(--bg-elevated); --paper: var(--bg-page); --cream: var(--bg-surface); --beige: var(--bg-elevated); --gray-800: var(--bg-surface); --gray-700: var(--border-default); --gray-600: var(--border-strong); --gray-500: var(--text-muted); --gray-400: var(--text-secondary); --gray-300: var(--text-primary); --amber: var(--brand); --amber-soft: var(--brand-soft); --amber-bg: var(--brand-bg); --border: var(--border-default); --coral: var(--danger); --sage: var(--success); --green: var(--success); --yellow: var(--warn); }