/* ============================================================================ AXIOMA DESIGN SYSTEM v2.0 — Multi-theme CDN: axiomstudiofinal.web.app/modules/design-system.css Três temas selecionáveis pelo cliente final (via ): · constelacao — dark cosmic premium (DEFAULT) · grid — swiss precision, mono-display · aurora — humanist editorial warm Cada produto ainda pode sobrescrever --accent / --accent-light / --accent-dark no seu scope pra manter identidade de marca por produto, dentro do tema ativo. Backward compat: mantém TODAS as classes da v1.0 (btn, card, form-input, toggle-switch, toast, modal, sidebar, etc). É drop-in replacement. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..600,100&family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================================================ RESET ============================================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ============================================================================ TOKENS · BASE (compartilhados entre temas) ============================================================================ */ :root { /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Layout */ --sidebar-width: 240px; --sidebar-collapsed: 64px; --header-height: 64px; /* Motion */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 0.15s; --dur: 0.25s; --dur-slow: 0.4s; } /* ============================================================================ TEMA 01 · CONSTELAÇÃO (default) ============================================================================ */ :root, [data-theme="constelacao"] { /* Fonts */ --font-display: 'Instrument Serif', 'Georgia', serif; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Backgrounds */ --bg: #07080f; --bg-deep: #050609; --bg-card: #0f1220; --bg-elevated: #161a2e; --bg-input: #0d1020; --bg-hover: rgba(165, 180, 252, 0.06); /* Text */ --text: #e8eaf6; --text-secondary: #9ca0b8; --text-muted: #5b627a; /* Borders */ --border: rgba(165, 180, 252, 0.12); --border-light: rgba(165, 180, 252, 0.06); --border-strong: rgba(165, 180, 252, 0.28); /* Status */ --green: #34d399; --red: #f87171; --yellow: #fbbf24; --blue: #a5b4fc; /* Accent (canonical — sobrescrevível por produto) */ --accent: #fbbf24; --accent-light: rgba(251, 191, 36, 0.12); --accent-dark: #e0a81e; --accent-glow: rgba(251, 191, 36, 0.25); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(165, 180, 252, 0.08); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(165, 180, 252, 0.12); --shadow-glow: 0 0 24px var(--accent-glow); /* Radius */ --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --radius-pill: 100px; /* Typography details */ --letter-tight: -0.02em; --label-case: uppercase; --label-track: 2px; /* Font family applied to body */ --font-body-applied: var(--font-body); } /* ============================================================================ TEMA 02 · GRID — swiss precision ============================================================================ */ [data-theme="grid"] { --font-display: 'JetBrains Mono', 'Courier New', monospace; --font-body: 'Geist', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --bg: #f7f6f2; --bg-deep: #efede7; --bg-card: #ffffff; --bg-elevated: #fafaf6; --bg-input: #fafaf6; --bg-hover: #efede7; --text: #111111; --text-secondary: #555555; --text-muted: #999999; --border: #111111; --border-light: #e5e5e0; --border-strong: #111111; --green: #15803d; --red: #ef4444; --yellow: #d97706; --blue: #2563eb; --accent: #ef4444; --accent-light: rgba(239, 68, 68, 0.08); --accent-dark: #dc2626; --accent-glow: transparent; --shadow-sm: none; --shadow-md: 3px 3px 0 #111; --shadow-lg: 6px 6px 0 #111; --shadow-glow: none; --radius: 0; --radius-sm: 0; --radius-lg: 0; --radius-pill: 0; --letter-tight: -0.04em; --label-case: uppercase; --label-track: 2px; } /* ============================================================================ TEMA 03 · AURORA — humanist editorial ============================================================================ */ [data-theme="aurora"] { --font-display: 'Fraunces', 'Georgia', serif; --font-body: 'Geist', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --bg: #f0ebe3; --bg-deep: #e8e1d3; --bg-card: #f9f5ee; --bg-elevated: #fdfaf4; --bg-input: #f5efe5; --bg-hover: #ebe4d6; --text: #1a1614; --text-secondary: #5e5449; --text-muted: #a89d8a; --border: #d4cbbf; --border-light: #e3dbcd; --border-strong: #b8ab9a; --green: #15803d; --red: #c2410c; --yellow: #ca8a04; --blue: #1e40af; --accent: #c2410c; --accent-light: rgba(194, 65, 12, 0.08); --accent-dark: #9a3412; --accent-glow: rgba(194, 65, 12, 0.15); --shadow-sm: 0 1px 2px rgba(26, 22, 20, 0.04); --shadow-md: 0 1px 2px rgba(26, 22, 20, 0.04), 0 10px 30px rgba(26, 22, 20, 0.06); --shadow-lg: 0 1px 2px rgba(26, 22, 20, 0.04), 0 20px 50px rgba(26, 22, 20, 0.12); --shadow-glow: 0 10px 30px var(--accent-glow); --radius: 16px; --radius-sm: 12px; --radius-lg: 24px; --radius-pill: 100px; --letter-tight: -0.03em; --label-case: none; --label-track: 0; } /* ============================================================================ DECORATIONS de fundo por tema ============================================================================ */ /* Constelação: campo de estrelas */ [data-theme="constelacao"] body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(1px 1px at 10% 20%, rgba(251, 191, 36, 0.5) 0%, transparent 60%), radial-gradient(1px 1px at 80% 15%, rgba(165, 180, 252, 0.45) 0%, transparent 60%), radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.35) 0%, transparent 60%), radial-gradient(1px 1px at 90% 80%, rgba(251, 191, 36, 0.45) 0%, transparent 60%), radial-gradient(1px 1px at 55% 40%, rgba(165, 180, 252, 0.35) 0%, transparent 60%), radial-gradient(1px 1px at 22% 88%, rgba(255, 255, 255, 0.45) 0%, transparent 60%), radial-gradient(1px 1px at 70% 55%, rgba(251, 191, 36, 0.3) 0%, transparent 60%), radial-gradient(ellipse 600px 400px at 85% 10%, rgba(165, 180, 252, 0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* Grid: malha de linhas */ [data-theme="grid"] body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.035) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } /* Aurora: sem decoração de fundo (clean) */ /* Garante que o conteúdo fique acima das decorações */ body > * { position: relative; z-index: 1; } /* ============================================================================ TYPOGRAPHY ============================================================================ */ body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text); letter-spacing: var(--letter-tight); line-height: 1.15; } h1 { font-size: clamp(32px, 4vw, 44px); font-weight: 500; } h2 { font-size: 1.75rem; font-weight: 500; } h3 { font-size: 1.25rem; font-weight: 600; } h4 { font-size: 1rem; font-weight: 600; } /* Theme-specific display weight adjustments */ [data-theme="constelacao"] h1, [data-theme="constelacao"] h2 { font-weight: 400; } [data-theme="aurora"] h1, [data-theme="aurora"] h2 { font-weight: 400; font-variation-settings: 'SOFT' 100; } [data-theme="grid"] h1::before { content: '// '; color: var(--text-muted); } [data-theme="grid"] h1 em { font-style: normal; color: var(--accent); } [data-theme="constelacao"] h1 em, [data-theme="aurora"] h1 em { font-style: italic; color: var(--accent); } a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast); } a:hover { color: var(--accent-dark); } .text-accent { color: var(--accent); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-green { color: var(--green); } .text-red { color: var(--red); } .text-center { text-align: center; } .text-right { text-align: right; } .text-display { font-family: var(--font-display); letter-spacing: var(--letter-tight); } .text-mono { font-family: var(--font-mono); } /* Label — padrão visual repetido em muitos componentes */ .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--text-muted); } [data-theme="aurora"] .label { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--text-secondary); } /* ============================================================================ APP LAYOUT (Sidebar + Header + Content) ============================================================================ */ .app-layout { display: flex; min-height: 100vh; } /* ============================================================================ SIDEBAR ============================================================================ */ .sidebar { width: var(--sidebar-width); min-height: 100vh; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 200; transition: width var(--dur) var(--ease), background var(--dur) var(--ease); } .sidebar.collapsed { width: var(--sidebar-collapsed); } /* Brand */ .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 20px; min-height: var(--header-height); border-bottom: 1px solid var(--border); } .sidebar-brand .brand-icon { font-size: 22px; flex-shrink: 0; } .sidebar-brand .brand-logo { height: 36px; width: 36px; max-height: 36px; max-width: 36px; border-radius: var(--radius-sm); flex-shrink: 0; object-fit: cover; } .sidebar-brand .brand-text { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: var(--letter-tight); white-space: nowrap; overflow: hidden; color: var(--text); } [data-theme="constelacao"] .sidebar-brand .brand-text { font-weight: 400; } [data-theme="constelacao"] .sidebar-brand .brand-text em, [data-theme="aurora"] .sidebar-brand .brand-text em { font-style: italic; color: var(--accent); } [data-theme="grid"] .sidebar-brand .brand-text em { font-style: normal; color: var(--accent); } /* Collapsed: hide labels */ .sidebar.collapsed .brand-text, .sidebar.collapsed .sidebar-label, .sidebar.collapsed .sidebar-section-label { display: none; } .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0 12px; } /* Nav */ .sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; } .sidebar-section { padding: 20px 20px 6px; display: flex; align-items: center; } .sidebar-section-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: var(--label-case); letter-spacing: var(--label-track); } [data-theme="aurora"] .sidebar-section-label { font-family: var(--font-body); font-size: 11px; text-transform: none; letter-spacing: 0; } .sidebar.collapsed .sidebar-section { justify-content: center; padding: 16px 8px 6px; } /* Nav items */ .sidebar-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--text-secondary); cursor: pointer; transition: all var(--dur-fast) var(--ease); text-decoration: none; position: relative; margin: 2px 8px; border-radius: var(--radius); border: none; background: none; font-family: var(--font-body); font-size: 14px; font-weight: 500; width: calc(100% - 16px); text-align: left; } .sidebar-item:hover { background: var(--bg-hover); color: var(--text); } .sidebar-item.active { background: var(--accent-light); color: var(--accent); } /* Constelação: active indicator with glow bar */ [data-theme="constelacao"] .sidebar-item.active::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; background: var(--accent); border-radius: 0 2px 2px 0; box-shadow: 0 0 12px var(--accent-glow); } /* Grid: full accent fill, no indicator bar */ [data-theme="grid"] .sidebar-item.active { background: var(--accent); color: #fff; } /* Aurora: soft pill, no bar */ [data-theme="aurora"] .sidebar-item.active { background: var(--accent-light); color: var(--accent); } /* Sidebar icons */ .sidebar-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .sidebar-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .sidebar-label { font-weight: 500; white-space: nowrap; } /* Collapsed items */ .sidebar.collapsed .sidebar-item { justify-content: center; padding: 10px; margin: 2px 8px; } .sidebar.collapsed .sidebar-item::before { display: none; } /* Sidebar footer */ .sidebar-footer { border-top: 1px solid var(--border); } .sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px; border: none; background: none; color: var(--text-muted); cursor: pointer; transition: color var(--dur-fast); } .sidebar-collapse-btn:hover { color: var(--text); } .sidebar-collapse-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur); } .sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); } /* ============================================================================ MAIN AREA ============================================================================ */ .app-main { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left var(--dur) var(--ease); } .app-layout .sidebar.collapsed ~ .app-main { margin-left: var(--sidebar-collapsed); } /* ============================================================================ HEADER ============================================================================ */ .app-header { display: flex; align-items: center; gap: 16px; padding: 0 24px; height: var(--header-height); background: var(--bg-card); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .header-hamburger { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); align-items: center; justify-content: center; } .header-hamburger:hover { background: var(--bg-hover); } .header-hamburger svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .header-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; flex: 1; letter-spacing: var(--letter-tight); } [data-theme="constelacao"] .header-title { font-weight: 400; } .header-business { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); padding: 4px 12px; background: var(--bg-input); border-radius: var(--radius-pill); border: 1px solid var(--border); white-space: nowrap; letter-spacing: 0.5px; text-transform: var(--label-case); } [data-theme="aurora"] .header-business { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 12px; } /* Header user / avatar dropdown */ .header-user { display: flex; align-items: center; gap: 10px; position: relative; } .header-user .user-name { font-size: 13px; color: var(--text-secondary); } .user-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; object-fit: cover; } [data-theme="grid"] .user-avatar { border-radius: 0; } /* User dropdown */ .user-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 220px; z-index: 300; display: none; overflow: hidden; } .user-dropdown.active { display: block; animation: dropdownIn var(--dur) var(--ease); } @keyframes dropdownIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .user-dropdown-header { padding: 12px 16px; border-bottom: 1px solid var(--border); } .user-dropdown-header .user-email { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); } [data-theme="aurora"] .user-dropdown-header .user-email { font-family: var(--font-body); } .user-dropdown-header .user-plan { font-family: var(--font-mono); font-size: 10px; color: var(--accent); font-weight: 600; text-transform: var(--label-case); letter-spacing: var(--label-track); margin-top: 4px; } [data-theme="aurora"] .user-dropdown-header .user-plan { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 12px; } .user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--text-secondary); font-size: 14px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-body); transition: background var(--dur-fast); } .user-dropdown-item:hover { background: var(--bg-hover); color: var(--text); } .user-dropdown-item.danger { color: var(--red); } .user-dropdown-item.danger:hover { background: rgba(239, 68, 68, 0.08); } /* ============================================================================ CONTENT & PAGES ============================================================================ */ .app-content { flex: 1; padding: 24px; max-width: 1280px; width: 100%; } .page { display: none; } .page.active { display: block; animation: pageIn var(--dur) var(--ease); } @keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .page-header h3 { margin: 0; } /* Page sub-tabs */ .page-subtabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 0; } .page-subtab { padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--text-muted); cursor: pointer; border: none; background: none; font-family: var(--font-body); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--dur-fast); } .page-subtab:hover { color: var(--text); } .page-subtab.active { color: var(--accent); border-bottom-color: var(--accent); } /* Sidebar Overlay (mobile) */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 199; } .sidebar-overlay.active { display: block; animation: fadeIn var(--dur); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============================================================================ BUTTONS ============================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--radius); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--dur-fast) var(--ease); text-decoration: none; line-height: 1.4; white-space: nowrap; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--bg); } [data-theme="grid"] .btn-primary { color: #fff; } [data-theme="aurora"] .btn-primary { background: var(--text); color: var(--bg); box-shadow: 0 4px 12px rgba(26, 22, 20, 0.15); } .btn-primary:hover:not(:disabled) { background: var(--accent-dark); box-shadow: var(--shadow-sm); } [data-theme="constelacao"] .btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-glow); } [data-theme="grid"] .btn-primary:hover:not(:disabled) { background: var(--accent-dark); box-shadow: 4px 4px 0 #111; transform: translate(-1px, -1px); } [data-theme="aurora"] .btn-primary:hover:not(:disabled) { background: #000; box-shadow: 0 8px 20px rgba(26, 22, 20, 0.25); } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn-outline:hover:not(:disabled) { background: var(--accent-light); } .btn-ghost { background: transparent; color: var(--text-secondary); padding: 8px 16px; } .btn-ghost:hover { color: var(--text); background: var(--bg-hover); } .btn-danger { background: var(--red); color: #fff; } .btn-danger:hover:not(:disabled) { filter: brightness(0.92); } .btn-sm { padding: 6px 14px; font-size: 13px; } .btn-lg { padding: 14px 28px; font-size: 16px; } .btn-block { width: 100%; } .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; } .btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Grid: buttons get uppercase mono label */ [data-theme="grid"] .btn { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; } [data-theme="grid"] .btn-sm { font-size: 11px; } [data-theme="grid"] .btn-lg { font-size: 14px; } /* ============================================================================ CARDS ============================================================================ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); position: relative; } .card:hover { box-shadow: var(--shadow-md); } .card-flat { box-shadow: none; } .card-flat:hover { box-shadow: none; } /* ============================================================================ STATS CARDS (KPIs) ============================================================================ */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); position: relative; transition: all var(--dur) var(--ease); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } [data-theme="grid"] .stat-card:hover { transform: none; box-shadow: 5px 5px 0 #111; } /* Grid: crosshair corners */ [data-theme="grid"] .stat-card::before, [data-theme="grid"] .stat-card::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid var(--accent); } [data-theme="grid"] .stat-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } [data-theme="grid"] .stat-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } .stat-card-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .stat-card-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; } .stat-value { font-family: var(--font-display); font-size: 36px; font-weight: 500; color: var(--text); line-height: 1; letter-spacing: var(--letter-tight); } [data-theme="constelacao"] .stat-value { font-weight: 400; } [data-theme="aurora"] .stat-value { font-weight: 400; font-variation-settings: 'SOFT' 100; } [data-theme="constelacao"] .stat-value em, [data-theme="aurora"] .stat-value em { font-style: italic; color: var(--accent); } .stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-transform: var(--label-case); letter-spacing: var(--label-track); margin-top: 8px; } [data-theme="aurora"] .stat-label { font-family: var(--font-body); font-size: 13px; text-transform: none; letter-spacing: 0; } .stat-change { font-size: 12px; font-weight: 600; margin-top: 6px; } .stat-change.up { color: var(--green); } .stat-change.down { color: var(--red); } /* ============================================================================ FORMS ============================================================================ */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; } .form-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; } .form-input, .form-select, textarea.form-input { width: 100%; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: 14px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); } .form-input:focus, .form-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); background: var(--bg-card); } [data-theme="grid"] .form-input:focus, [data-theme="grid"] .form-select:focus { box-shadow: 3px 3px 0 var(--accent); } .form-input::placeholder { color: var(--text-muted); } textarea.form-input { resize: vertical; min-height: 80px; line-height: 1.5; } .form-input-lg { padding: 14px 18px; font-size: 18px; text-align: center; letter-spacing: 2px; font-family: var(--font-mono); } .form-error { font-size: 12px; color: var(--red); margin-top: 4px; } .form-input.error { border-color: var(--red); } /* Phone input */ .phone-input-wrapper { position: relative; } .phone-input-wrapper .phone-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; font-family: var(--font-mono); } .phone-input-wrapper .form-input { padding-left: 48px; } /* Search input */ .search-input-wrapper { position: relative; } .search-input-wrapper .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 16px; height: 16px; pointer-events: none; } .search-input-wrapper .search-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; } .search-input-wrapper .form-input { padding-left: 40px; } /* Toggle / Switch */ .toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 12px; cursor: pointer; transition: background var(--dur) var(--ease); } [data-theme="grid"] .toggle-slider { border-radius: 0; border: 1px solid #111; background: var(--bg-card); } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform var(--dur) var(--ease); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } [data-theme="grid"] .toggle-slider::before { border-radius: 0; background: #111; box-shadow: none; left: 2px; bottom: 2px; width: 18px; height: 18px; } .toggle-switch input:checked + .toggle-slider { background: var(--accent); } [data-theme="grid"] .toggle-switch input:checked + .toggle-slider { background: var(--accent); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); } [data-theme="grid"] .toggle-switch input:checked + .toggle-slider::before { background: #fff; } /* Checkbox, Radio */ .form-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer; } .form-check input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } /* ============================================================================ TABLES ============================================================================ */ .table-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; box-shadow: var(--shadow-sm); } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px 16px; text-align: left; } th { background: var(--bg-input); font-family: var(--font-mono); font-size: 11px; text-transform: var(--label-case); color: var(--text-muted); letter-spacing: var(--label-track); font-weight: 600; } [data-theme="aurora"] th { font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; } td { border-top: 1px solid var(--border-light); font-size: 14px; color: var(--text); } tr:hover td { background: var(--bg-hover); } /* ============================================================================ BADGES ============================================================================ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--label-track); text-transform: var(--label-case); border: 1px solid transparent; } [data-theme="aurora"] .badge { font-family: var(--font-body); font-size: 12px; text-transform: none; letter-spacing: 0; } .badge-accent { background: var(--accent-light); color: var(--accent); border-color: var(--accent-light); } .badge-green { background: rgba(52, 211, 153, 0.12); color: var(--green); } .badge-red { background: rgba(239, 68, 68, 0.12); color: var(--red); } .badge-yellow { background: rgba(251, 191, 36, 0.12); color: var(--yellow); } .badge-blue { background: rgba(165, 180, 252, 0.12); color: var(--blue); } .badge-gray { background: var(--bg-input); color: var(--text-muted); border-color: var(--border); } /* Grid: solid filled badges (no pill) */ [data-theme="grid"] .badge-accent { background: var(--accent); color: #fff; } [data-theme="grid"] .badge-green { background: var(--green); color: #fff; } [data-theme="grid"] .badge-red { background: var(--red); color: #fff; } [data-theme="grid"] .badge-yellow { background: var(--yellow); color: #fff; } [data-theme="grid"] .badge-blue { background: var(--blue); color: #fff; } .badge-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; } [data-theme="constelacao"] .badge-dot { box-shadow: 0 0 8px currentColor; } [data-theme="grid"] .badge-dot { border-radius: 0; background: #fff; } /* ============================================================================ MODAL ============================================================================ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-backdrop.active { display: flex; animation: fadeIn var(--dur); } .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalIn var(--dur) var(--ease); } .modal-lg { max-width: 640px; } .modal-sm { max-width: 360px; } @keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .modal-header h3 { margin: 0; } .modal-close { background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; padding: 4px; line-height: 1; transition: color var(--dur-fast); } .modal-close:hover { color: var(--text); } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); } /* ============================================================================ TOAST NOTIFICATIONS ============================================================================ */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { padding: 14px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; color: var(--text); box-shadow: var(--shadow-lg); animation: toastIn var(--dur) var(--ease); display: flex; align-items: center; gap: 10px; pointer-events: auto; max-width: 380px; } .toast.success { border-left: 3px solid var(--green); } .toast.error { border-left: 3px solid var(--red); } .toast.warning { border-left: 3px solid var(--yellow); } .toast.info { border-left: 3px solid var(--accent); } .toast-close { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 0 0 8px; line-height: 1; } @keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } /* ============================================================================ EMPTY STATE ============================================================================ */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; } .empty-state-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; letter-spacing: var(--letter-tight); } .empty-state-text { font-size: 14px; margin-bottom: 24px; max-width: 400px; margin-left: auto; margin-right: auto; } /* ============================================================================ SPINNER / LOADING ============================================================================ */ .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; } [data-theme="grid"] .spinner { border-radius: 0; } .spinner-lg { width: 40px; height: 40px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-overlay { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity var(--dur-slow); } .loading-overlay.hidden { opacity: 0; pointer-events: none; } /* ============================================================================ CONTAINERS ============================================================================ */ .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .container-sm { max-width: 600px; margin: 0 auto; padding: 0 20px; } .section { padding: 80px 0; } .section-sm { padding: 40px 0; } /* ============================================================================ NAVBAR (landing pages) ============================================================================ */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: var(--bg-card); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .navbar-brand { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: var(--letter-tight); display: flex; align-items: center; gap: 10px; color: var(--text); } [data-theme="constelacao"] .navbar-brand { font-weight: 400; } .navbar-brand .brand-icon { font-size: 24px; } .navbar-brand .brand-logo { height: 44px; width: auto; border-radius: var(--radius-sm); object-fit: contain; } .navbar-nav { display: flex; align-items: center; gap: 20px; } .navbar-user { display: flex; align-items: center; gap: 12px; } /* ============================================================================ AVATAR ============================================================================ */ .avatar { border-radius: 50%; object-fit: cover; border: 2px solid var(--border); } [data-theme="grid"] .avatar { border-radius: 0; } .avatar-sm { width: 28px; height: 28px; } .avatar-md { width: 36px; height: 36px; } .avatar-lg { width: 48px; height: 48px; } .avatar-xl { width: 64px; height: 64px; } /* ============================================================================ PROGRESS BAR ============================================================================ */ .progress { height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden; } [data-theme="grid"] .progress { border-radius: 0; border: 1px solid #111; height: 10px; } .progress-bar { height: 100%; background: var(--accent); border-radius: 4px; transition: width var(--dur-slow) var(--ease); } [data-theme="grid"] .progress-bar { border-radius: 0; } .progress-bar.green { background: var(--green); } .progress-bar.red { background: var(--red); } .progress-bar.yellow { background: var(--yellow); } /* ============================================================================ TABS ============================================================================ */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--text-muted); cursor: pointer; border: none; background: none; font-family: var(--font-body); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--dur-fast); } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* ============================================================================ DIVIDER ============================================================================ */ .divider { height: 1px; background: var(--border); margin: 16px 0; border: none; } /* ============================================================================ THEME SWITCHER (nova — componente pronto para drop-in) ============================================================================ */ .theme-switcher { display: inline-flex; gap: 2px; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); } [data-theme="grid"] .theme-switcher { border-radius: 0; } .theme-switcher-btn { background: transparent; border: none; padding: 8px 14px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); cursor: pointer; transition: all var(--dur-fast) var(--ease); } [data-theme="aurora"] .theme-switcher-btn { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 13px; } [data-theme="grid"] .theme-switcher-btn { border-radius: 0; } .theme-switcher-btn:hover { color: var(--text); } .theme-switcher-btn.active { background: var(--accent); color: var(--bg); } [data-theme="grid"] .theme-switcher-btn.active { color: #fff; } /* Floating variant */ .theme-switcher-floating { position: fixed; top: 20px; right: 20px; z-index: 500; box-shadow: var(--shadow-md); } /* ============================================================================ GRID UTILITIES ============================================================================ */ .grid { display: grid; gap: 16px; } .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-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* ============================================================================ FLEX UTILITIES ============================================================================ */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .flex-1 { flex: 1; } /* ============================================================================ SPACING UTILITIES ============================================================================ */ .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .p-0 { padding: 0; } .p-8 { padding: 8px; } .p-12 { padding: 12px; } .p-16 { padding: 16px; } .p-20 { padding: 20px; } .p-24 { padding: 24px; } /* ============================================================================ VISIBILITY ============================================================================ */ .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ============================================================================ LEGACY ALIASES (v1 backward compat) Mantém variáveis antigas funcionando pra quem já referenciou --bg-card, --text-secondary etc. em CSS de produto. ============================================================================ */ /* Estes tokens já são exportados acima, este bloco existe apenas pra documentar explicitamente a compatibilidade com v1.0 */ /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width: 768px) { h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } .section { padding: 50px 0; } .navbar { padding: 12px 16px; } /* Sidebar: slide-in on mobile */ .sidebar { transform: translateX(-100%); width: 260px; } .sidebar.open { transform: translateX(0); } .sidebar.collapsed { width: 260px; } .app-main { margin-left: 0; } .app-layout .sidebar.collapsed ~ .app-main { margin-left: 0; } .header-hamburger { display: flex; } .sidebar-collapse-btn { display: none; } .app-content { padding: 16px; } .header-business { display: none; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .modal { padding: 24px; } .theme-switcher-floating { top: auto; bottom: 16px; right: 16px; } } @media (max-width: 480px) { h1 { font-size: 1.5rem; } .container { padding: 0 16px; } .btn-lg { padding: 12px 24px; font-size: 15px; } .stats-grid { grid-template-columns: 1fr; } } /* ============================================================================ PRINT ============================================================================ */ @media print { body { background: #fff !important; color: #000 !important; } body::before { display: none !important; } .navbar, .sidebar, .app-header, .toast-container, .sidebar-overlay, .theme-switcher, .no-print { display: none !important; } .app-main { margin-left: 0 !important; } .app-content { padding: 0; max-width: none; } .card, .stat-card { box-shadow: none; border: 1px solid #ddd; } }