/* ============================================================================ InovaVet — Design Tokens (CSS custom properties) Definição das variáveis CSS para tema claro (:root) e escuro ([data-theme="dark"]). Para overrides de classes Tailwind hardcoded no dark mode, ver `theme-overrides.css`. Aplicação: (claro) ou (escuro) ========================================================================== */ :root { /* Marca */ --brand: #3FA3AB; --brand-hover: #2A7A82; --brand-deep: #1C5A60; --brand-subtle: #EAF6F7; --brand-text: #1C5A60; /* Superfícies */ --bg: #f4f6f8; --bg-2: #edf0f3; --surface: #ffffff; --surface-2: #f8fafc; --surface-hi: #f1f5f9; /* Bordas */ --border: #e2e8f0; --border-2: #cbd5e1; /* Texto */ --text-1: #0f172a; --text-2: #475569; --text-3: #94a3b8; /* Estados */ --red: #ef4444; --red-subtle: #fee2e2; --red-text: #dc2626; --amber: #f59e0b; --amber-subtle: #fef3c7; --amber-text: #d97706; --green-subtle: #dcfce7; --green-text: #15803d; --blue-subtle: #dbeafe; --blue-text: #1d4ed8; /* Componentes do Design System em formato RGB (para usar com alpha) */ --surface-rgb: 255 255 255; --bg-rgb: 244 246 248; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.03); --shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); --shadow-lg: 0 12px 28px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04); /* Border radius */ --r-sm: 7px; --r: 10px; --r-lg: 14px; color-scheme: light; } [data-theme="dark"] { --brand: #5BC0C7; --brand-hover: #7FD4DA; --brand-deep: #3FA3AB; --brand-subtle: #0f2b2d; --brand-text: #7fd4da; --bg: #0d1117; --bg-2: #0b0f15; --surface: #161b22; --surface-2: #1c2230; --surface-hi: #21262d; --border: #21262d; --border-2: #30363d; --text-1: #e6edf3; --text-2: #8b949e; --text-3: #484f58; --red-subtle: #2d0f0f; --red-text: #f87171; --amber-subtle: #2d1a00; --amber-text: #fbbf24; --green-subtle: #0d2818; --green-text: #4ade80; --blue-subtle: #0c1e3a; --blue-text: #60a5fa; --surface-rgb: 22 27 34; --bg-rgb: 13 17 23; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 12px 28px rgba(0,0,0,.6); color-scheme: dark; } /* Base do app — body e elementos com transição suave */ html, body { background-color: var(--bg); color: var(--text-1); transition: background-color 200ms ease, color 200ms ease; } a, button, input, select, textarea { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } /* Ícone de navegação (sidebar + topbar) — tamanho único centralizado (issue #482). Antes: 15px (sidebar expandida) / 18px (sidebar recolhida) / 16px (topbar), repetido inline em ~8 pontos via classes Tailwind arbitrárias (h-[15px] w-[15px] etc.) sem nenhuma consistência entre os três contextos. */ .nav-icon { width: 18px; height: 18px; flex-shrink: 0; } /* Ícones de controle da topbar/sidebar (chevron de recolher, hamburguer mobile) — mesma razão do .nav-icon: tamanho fixo via CSS real em vez de classe Tailwind (h-4 w-4 / h-5 w-5), que soma ao flash de ícones grandes no carregamento enquanto o Tailwind CDN ainda não compilou o JIT (issue #481). */ .icon-16 { width: 16px; height: 16px; flex-shrink: 0; } .icon-20 { width: 20px; height: 20px; flex-shrink: 0; }