/* ================================================================ TOKENS — Sistema de Design OX Automação Todas as variáveis globais do sistema. Trocar tema = trocar só estas variáveis. Nunca use cores, tamanhos ou espaçamentos hardcoded nos componentes — use sempre os tokens abaixo. ================================================================ */ :root { /* ---------------------------------------------------------- OX DESIGN SYSTEM v1.0 — Paleta Oficial da Marca Documentação completa: DocsDesenvolvimento/ox_design_system.md ---------------------------------------------------------- */ --ox-primary: #D71920; /* OX Red — cor principal da marca */ --ox-primary-dark: #A90F17; /* OX Red Dark — hover, topbar, menu selecionado */ --ox-white: #F8FAFC; /* OX White — textos sobre fundo escuro */ --ox-bg: #18181B; /* OX Graphite — fundo escuro / sidebar */ --ox-surface: #27272A; /* OX Surface — cards escuros / menu lateral */ --ox-border: #D4D4D8; /* OX Silver — bordas e divisores */ --ox-success: #22C55E; --ox-info: #2563EB; --ox-warning: #F59E0B; --ox-danger: #DC2626; --ox-text: #18181B; --ox-text-light: #52625B; --ox-text-inverse: #F8FAFC; /* ---------------------------------------------------------- CORES — Tema Light (padrão) ---------------------------------------------------------- */ /* Superfícies */ --color-bg: #f0f2f5; /* fundo geral da página */ --color-surface: #ffffff; /* cards, modais, painéis */ --color-surface-raised: #ffffff; /* superfície elevada (dropdown, tooltip) */ --color-surface-sunken: #e8eaed; /* área recuada (input, código) */ /* Bordas */ --color-border: #d9dde3; --color-border-strong: #b0b8c1; --color-border-focus: var(--color-primary); /* Texto */ --color-text: #1a1d23; /* texto principal */ --color-text-secondary: #5a6270; /* labels, metadados */ --color-text-disabled: #a0a8b4; --color-text-inverse: #ffffff; /* texto sobre fundo escuro/primário */ /* Primária — OX Red */ --color-primary: #D71920; /* OX Red */ --color-primary-hover: #A90F17; /* OX Red Dark */ --color-primary-active: #8B0D13; --color-primary-subtle: #fff5f5; --color-primary-text: #A90F17; /* Semânticas */ --color-success: #16a34a; --color-success-subtle: #f0fdf4; --color-success-border: #86efac; --color-warning: #d97706; --color-warning-subtle: #fffbeb; --color-warning-border: #fcd34d; --color-danger: #dc2626; --color-danger-subtle: #fef2f2; --color-danger-border: #fca5a5; --color-danger-hover: #b91c1c; --color-info: #0891b2; --color-info-subtle: #ecfeff; --color-info-border: #67e8f9; /* Sidebar — OX Design System */ --color-sidebar-bg: #18181B; /* OX Graphite */ --color-sidebar-text: #a8b0be; --color-sidebar-text-active: #ffffff; --color-sidebar-item-hover: #27272A; /* OX Surface */ --color-sidebar-item-active: #A90F17; /* OX Red Dark */ --color-sidebar-border: rgba(255,255,255,0.08); /* Topbar — OX Design System */ --color-topbar-bg: #A90F17; /* OX Red Dark */ --color-topbar-border: #8B0D13; /* ---------------------------------------------------------- TIPOGRAFIA ---------------------------------------------------------- */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --font-size-xs: 13px; --font-size-sm: 14px; --font-size-base: 15px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-relaxed: 1.75; /* ---------------------------------------------------------- ESPAÇAMENTOS ---------------------------------------------------------- */ --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; /* ---------------------------------------------------------- BORDAS E RAIOS ---------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 9999px; /* ---------------------------------------------------------- SOMBRAS ---------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05); --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04); --shadow-xl: 0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04); --shadow-focus: 0 0 0 3px rgba(215,25,32,0.2); /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --sidebar-width: 240px; --sidebar-width-collapsed: 56px; --topbar-height: 54px; --content-max-width: 1400px; /* Shell tokens — controlados por tema/template */ --nav-item-height: 34px; --nav-section-gap: 4px; --nav-item-radius: var(--radius-md); --nav-item-padding: 0 var(--spacing-3); --nav-icon-size: 17px; --sidebar-logo-height: 56px; --topbar-shadow: var(--shadow-xs); --shell-page-padding: var(--spacing-6); /* ---------------------------------------------------------- TRANSIÇÕES ---------------------------------------------------------- */ --transition-fast: 0.12s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; /* ---------------------------------------------------------- Z-INDEX ---------------------------------------------------------- */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-modal-backdrop: 400; --z-toast: 500; --z-tooltip: 600; } /* ================================================================ TEMA DARK Sobrescreve apenas as variáveis que mudam. A estrutura, tamanhos e espaçamentos permanecem iguais. ================================================================ */ [data-theme="dark"] { /* ── Fundos ─────────────────────────────────────────────── */ --color-bg: #111113; /* fundo da página — quase preto neutro */ --color-surface: #1C1C1F; /* cards, painéis, modais */ --color-surface-raised: #222226; /* dropdown, tooltip */ --color-surface-sunken: #16161A; /* thead de tabelas, inputs */ --color-surface-hover: rgba(255,255,255,0.04); /* ── Bordas ─────────────────────────────────────────────── */ --color-border: #2A2A2D; /* bordas padrão */ --color-border-strong: #3A3A3E; /* bordas de destaque */ --color-border-subtle: #222226; /* bordas internas muito suaves */ /* ── Texto ──────────────────────────────────────────────── */ --color-text: #F4F4F5; /* texto principal — branco levemente quente */ --color-text-secondary: #A0A0AB; /* labels, subtítulos */ --color-text-disabled: #56565E; /* desabilitado */ --color-text-inverse: #111113; /* ── Primária (OX Red) ──────────────────────────────────── */ --color-primary: #D71920; --color-primary-hover: #A90F17; --color-primary-active: #8B0D13; --color-primary-subtle: rgba(215,25,32,0.14); --color-primary-border: rgba(215,25,32,0.30); --color-primary-text: #f87171; /* ── Sucesso ────────────────────────────────────────────── */ --color-success: #22c55e; --color-success-subtle: rgba(34,197,94,0.12); --color-success-border: rgba(34,197,94,0.28); /* ── Alerta ─────────────────────────────────────────────── */ --color-warning: #f59e0b; --color-warning-subtle: rgba(245,158,11,0.12); --color-warning-border: rgba(245,158,11,0.28); /* ── Perigo ─────────────────────────────────────────────── */ --color-danger: #ef4444; --color-danger-subtle: rgba(239,68,68,0.12); --color-danger-border: rgba(239,68,68,0.28); --color-danger-hover: #dc2626; --color-danger-dark: #A90F17; /* ── Info ───────────────────────────────────────────────── */ --color-info: #06b6d4; --color-info-subtle: rgba(6,182,212,0.12); --color-info-border: rgba(6,182,212,0.28); /* ── Sidebar ────────────────────────────────────────────── */ --color-sidebar-bg: #18181B; /* Graphite OX */ --color-sidebar-text: #A0A0AB; --color-sidebar-text-active: #F4F4F5; --color-sidebar-item-hover: rgba(255,255,255,0.06); --color-sidebar-item-active: #A90F17; --color-sidebar-border: rgba(255,255,255,0.05); /* ── Topbar ─────────────────────────────────────────────── */ --color-topbar-bg: #A90F17; --color-topbar-border: #8B0D13; /* ── Sombras (mais pronunciadas no dark) ────────────────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.40); --shadow-sm: 0 1px 3px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 4px 6px rgba(0,0,0,0.50), 0 2px 4px rgba(0,0,0,0.35); --shadow-lg: 0 10px 15px rgba(0,0,0,0.60), 0 4px 6px rgba(0,0,0,0.35); --shadow-xl: 0 20px 25px rgba(0,0,0,0.70), 0 10px 10px rgba(0,0,0,0.35); --shadow-focus: 0 0 0 3px rgba(215,25,32,0.35); }