/**
* OriaPsi Design System
* Sistema de design centralizado para garantir consistência em todas as páginas
*
* Uso:
*/
/* ============================================
FONTE — Inter (Fase 2, Bloco 0)
--------------------------------------------
Troca Nunito -> Inter (roadmap-brand.md §3). Carregada via @import aqui
porque o app ainda NAO tem centralizado (centralizar em
responsive-head.php com é trabalho do Bloco A).
Toda página que carrega este CSS passa a ter Inter. Reversível: basta
remover este @import e o stack volta a cair em Nunito.
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ============================================
VARIÁVEIS DO DESIGN SYSTEM
============================================ */
:root {
/* ===== CORES PRIMÁRIAS (Aurora) ===== */
--aurora-blue: #b3e0ff;
--aurora-blue-light: #d6f0ff;
--aurora-blue-dark: #8cc8ff;
--aurora-lilac: #b8aaff;
--aurora-lilac-light: #d4caff;
--aurora-lilac-dark: #9c8aff;
--aurora-gold: #ffe6b3;
--aurora-gold-light: #fff2d9;
--aurora-gold-dark: #ffd980;
/* ===== CORES DE FUNDO (Tema Escuro - Padrão) ===== */
--dark-bg: #0a0a0f;
--dark-bg-elevated: #0f0f15;
--light-bg: #1a1a2e;
--light-bg-elevated: #232336;
--card-bg: #232336;
--card-bg-hover: #2a2a42;
--overlay-bg: rgba(10, 10, 15, 0.85);
/* ===== CORES DE TEXTO (Tema Escuro - Padrão) ===== */
--text-main: #f4f4f8;
--text-secondary: #b3b3c6;
--text-tertiary: #8a8a9e;
--text-disabled: #5a5a6e;
--text-inverse: #0a0a0f;
/* ===== CORES SEMÂNTICAS ===== */
--success: #4ade80;
--success-light: #86efac;
--success-dark: #22c55e;
--success-bg: rgba(74, 222, 128, 0.1);
--warning: #fbbf24;
--warning-light: #fcd34d;
--warning-dark: #f59e0b;
--warning-bg: rgba(251, 191, 36, 0.1);
--error: #f87171;
--error-light: #fca5a5;
--error-dark: #ef4444;
--error-bg: rgba(248, 113, 113, 0.1);
--info: #60a5fa;
--info-light: #93c5fd;
--info-dark: #3b82f6;
--info-bg: rgba(96, 165, 250, 0.1);
/* ===== CORES DE ACENTO ===== */
--accent: var(--aurora-lilac);
--accent-hover: var(--aurora-lilac-light);
--accent-active: var(--aurora-lilac-dark);
/* ===== GRADIENTES ===== */
--gradient-primary: linear-gradient(135deg, var(--aurora-blue) 0%, var(--aurora-lilac) 50%, var(--aurora-gold) 100%);
--gradient-card: linear-gradient(135deg, var(--card-bg) 0%, var(--light-bg) 100%);
--gradient-hero: linear-gradient(135deg, var(--dark-bg) 0%, var(--light-bg) 50%, var(--card-bg) 100%);
--gradient-button: linear-gradient(135deg, var(--aurora-blue) 0%, var(--aurora-lilac) 100%);
--gradient-button-hover: linear-gradient(135deg, var(--aurora-blue-light) 0%, var(--aurora-lilac-light) 100%);
/* ===== SOMBRAS ===== */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
--shadow-glow: 0 0 20px rgba(184, 170, 255, 0.3);
--shadow-glow-hover: 0 0 30px rgba(184, 170, 255, 0.5);
/* ===== ESPAÇAMENTO (Spacing Scale) ===== */
--space-xs: 0.25rem;
/* 4px */
--space-sm: 0.5rem;
/* 8px */
--space-md: 1rem;
/* 16px */
--space-lg: 1.5rem;
/* 24px */
--space-xl: 2rem;
/* 32px */
--space-2xl: 3rem;
/* 48px */
--space-3xl: 4rem;
/* 64px */
--space-4xl: 6rem;
/* 96px */
/* ===== TIPOGRAFIA ===== */
/* Inter primária (Fase 2, Bloco 0); Nunito fica como fallback durante a
transição — páginas legadas ainda linkam Nunito no . */
--font-family: 'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
/* Tamanhos de fonte */
--font-xs: 0.75rem;
/* 12px */
--font-sm: 0.875rem;
/* 14px */
--font-base: 1rem;
/* 16px */
--font-lg: 1.125rem;
/* 18px */
--font-xl: 1.25rem;
/* 20px */
--font-2xl: 1.5rem;
/* 24px */
--font-3xl: 1.875rem;
/* 30px */
--font-4xl: 2.25rem;
/* 36px */
--font-5xl: 3rem;
/* 48px */
/* Pesos de fonte */
--font-normal: 400;
--font-medium: 600;
--font-semibold: 700;
--font-bold: 800;
/* Line heights */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
/* ===== BORDAS ===== */
--radius-sm: 0.375rem;
/* 6px */
--radius-md: 0.5rem;
/* 8px */
--radius-lg: 0.75rem;
/* 12px */
--radius-xl: 1rem;
/* 16px */
--radius-2xl: 1.5rem;
/* 24px */
--radius-full: 9999px;
/* Circular */
--border-width: 1px;
--border-color: rgba(184, 170, 255, 0.2);
--border-color-hover: rgba(184, 170, 255, 0.4);
/* ===== TRANSIÇÕES ===== */
--transition-fast: 150ms ease;
--transition-base: 300ms ease;
--transition-slow: 500ms ease;
--transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* ===== Z-INDEX SCALE ===== */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;
--z-notification: 800;
/* ===== BREAKPOINTS (para uso em JS) ===== */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
/* ===== MOBILE SPECIFIC ===== */
--mobile-header-height: 60px;
--mobile-tab-height: 50px;
--mobile-safe-area-top: env(safe-area-inset-top);
--mobile-safe-area-bottom: env(safe-area-inset-bottom);
--mobile-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
--mobile-card-radius: 16px;
--mobile-spacing: 1rem;
}
/* ============================================
RESET E BASE
============================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-family);
font-size: var(--font-base);
line-height: var(--leading-normal);
color: var(--text-main);
background: var(--dark-bg);
min-height: 100vh;
overflow-x: hidden;
}
/* ============================================
TIPOGRAFIA
============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--text-main);
margin-bottom: var(--space-md);
}
h1 {
font-size: var(--font-4xl);
}
h2 {
font-size: var(--font-3xl);
}
h3 {
font-size: var(--font-2xl);
}
h4 {
font-size: var(--font-xl);
}
h5 {
font-size: var(--font-lg);
}
h6 {
font-size: var(--font-base);
}
p {
margin-bottom: var(--space-md);
color: var(--text-secondary);
}
a {
color: var(--aurora-lilac);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--aurora-lilac-light);
}
/* ============================================
UTILITÁRIOS DE ESPAÇAMENTO
============================================ */
.mt-xs {
margin-top: var(--space-xs);
}
.mt-sm {
margin-top: var(--space-sm);
}
.mt-md {
margin-top: var(--space-md);
}
.mt-lg {
margin-top: var(--space-lg);
}
.mt-xl {
margin-top: var(--space-xl);
}
.mb-xs {
margin-bottom: var(--space-xs);
}
.mb-sm {
margin-bottom: var(--space-sm);
}
.mb-md {
margin-bottom: var(--space-md);
}
.mb-lg {
margin-bottom: var(--space-lg);
}
.mb-xl {
margin-bottom: var(--space-xl);
}
.p-xs {
padding: var(--space-xs);
}
.p-sm {
padding: var(--space-sm);
}
.p-md {
padding: var(--space-md);
}
.p-lg {
padding: var(--space-lg);
}
.p-xl {
padding: var(--space-xl);
}
/* ============================================
UTILITÁRIOS DE CORES
============================================ */
.text-main {
color: var(--text-main);
}
.text-secondary {
color: var(--text-secondary);
}
.text-tertiary {
color: var(--text-tertiary);
}
.text-success {
color: var(--success);
}
.text-warning {
color: var(--warning);
}
.text-error {
color: var(--error);
}
.text-info {
color: var(--info);
}
.bg-dark {
background: var(--dark-bg);
}
.bg-light {
background: var(--light-bg);
}
.bg-card {
background: var(--card-bg);
}
/* ============================================
RESPONSIVIDADE
============================================ */
/* Tablet */
@media (max-width: 1024px) {
:root {
--font-4xl: 2rem;
--font-3xl: 1.75rem;
--font-2xl: 1.375rem;
}
}
/* Mobile */
@media (max-width: 768px) {
:root {
--font-4xl: 1.875rem;
--font-3xl: 1.5rem;
--font-2xl: 1.25rem;
--font-xl: 1.125rem;
--font-lg: 1rem;
--space-xl: 1.5rem;
--space-2xl: 2rem;
--space-3xl: 3rem;
}
h1 {
font-size: var(--font-3xl);
margin-bottom: var(--space-md);
}
h2 {
font-size: var(--font-2xl);
margin-bottom: var(--space-md);
}
h3 {
font-size: var(--font-xl);
margin-bottom: var(--space-sm);
}
h4 {
font-size: var(--font-lg);
}
p {
font-size: var(--font-base);
margin-bottom: var(--space-sm);
}
/* Espaçamento reduzido em mobile */
.mt-xl {
margin-top: var(--space-lg);
}
.mt-2xl {
margin-top: var(--space-xl);
}
.mb-xl {
margin-bottom: var(--space-lg);
}
.mb-2xl {
margin-bottom: var(--space-xl);
}
.p-xl {
padding: var(--space-lg);
}
.p-2xl {
padding: var(--space-xl);
}
}
/* Mobile pequeno */
@media (max-width: 480px) {
:root {
--font-4xl: 1.5rem;
--font-3xl: 1.375rem;
--font-2xl: 1.125rem;
--font-xl: 1rem;
--space-md: 0.875rem;
--space-lg: 1.25rem;
--space-xl: 1.5rem;
}
h1 {
font-size: var(--font-2xl);
}
h2 {
font-size: var(--font-xl);
}
h3 {
font-size: var(--font-lg);
}
}
/* ============================================
ACESSIBILIDADE
============================================ */
/* Foco visível para navegação por teclado */
*:focus-visible {
outline: 2px solid var(--aurora-lilac);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Reduzir animações para usuários que preferem */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Alto contraste */
@media (prefers-contrast: high) {
:root {
--border-color: rgba(184, 170, 255, 0.6);
--text-secondary: var(--text-main);
}
}
/* ============================================
TEMA CLARO
============================================ */
body.theme-light {
/* ===== CORES DE FUNDO (Tema Claro) ===== */
--dark-bg: #f8f9fa;
--dark-bg-elevated: #ffffff;
--light-bg: #ffffff;
--light-bg-elevated: #f1f3f5;
--card-bg: #ffffff;
--card-bg-hover: #f8f9fa;
--overlay-bg: rgba(0, 0, 0, 0.5);
/* ===== CORES DE TEXTO (Tema Claro) ===== */
--text-main: #1a1a2e;
--text-secondary: #4a5568;
--text-tertiary: #718096;
--text-disabled: #a0aec0;
--text-inverse: #f4f4f8;
/* ===== BORDAS (Tema Claro) ===== */
--border-color: rgba(26, 26, 46, 0.15);
--border-color-hover: rgba(26, 26, 46, 0.3);
/* ===== SOMBRAS (Tema Claro) ===== */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.2);
--shadow-glow: 0 0 20px rgba(184, 170, 255, 0.2);
--shadow-glow-hover: 0 0 30px rgba(184, 170, 255, 0.3);
}
body.theme-light .top-navbar {
background: var(--light-bg);
border-bottom: 1px solid var(--border-color);
}
body.theme-light .user-info {
background: rgba(184, 170, 255, 0.08);
border: 1px solid var(--border-color);
}
body.theme-light .action-btn.primary {
background: var(--aurora-lilac);
color: var(--text-inverse);
}
body.theme-light .action-btn.primary:hover {
background: var(--aurora-lilac-dark);
box-shadow: 0 4px 15px rgba(184, 170, 255, 0.3);
}
/* ============================================================
TOKENS v2 — Tema claro (Fase 2, Bloco 0)
------------------------------------------------------------
Direção de marca aprovada em docs/roadmap-brand.md §2.
Contrato visual: docs/frontend/referencia-ui-v2.html.
OPT-IN, de propósito ("tokens antes de telas"): estes tokens
só valem em elementos sob `.ui-v2` ou `[data-ui="v2"]`. NÃO
entram em :root porque vários nomes semânticos (--text-secondary,
--success, --accent, --info-bg...) COLIDEM com o tema escuro
legado — sobrescrevê-los em :root quebraria todas as páginas
atuais. Cada tela migrada (Blocos B/C) opta marcando
e passa a consumir o sistema novo inteiro.
Aliases legado->novo e a virada do default ficam para o Bloco A,
quando o for centralizado (responsive-head.php).
============================================================ */
:root[data-ui="v2"],
.ui-v2 {
/* Estruturais */
--bg-page: #F4F6F9;
--bg-header: #D6E8F7;
--bg-header-hover: #B8D4EF;
--bg-surface: #FFFFFF;
--bg-subtle: #F8FAFC;
--border: #E2E8F0;
--border-input: #CBD5E1;
--text-primary: #1E293B;
--text-secondary: #64748B;
--text-muted: #94A3B8;
/* Ação e semântica */
--primary: #2563EB;
--primary-hover: #1D4ED8;
--primary-active: #1E40AF;
--primary-ring: rgba(37, 99, 235, 0.18);
--neutral: #64748B;
--neutral-hover: #475569;
--accent: #7C6BC4; /* lilás Aurora — só assistente IA/acentos */
--accent-soft: #EDE9FE;
--success: #16A34A; --success-bg: #ECFDF5; --success-border: #86EFAC;
--warning: #EA580C; --warning-bg: #FFF7ED; --warning-border: #FED7AA;
--error: #DC2626; --error-bg: #FEF2F2; --error-border: #FCA5A5;
--info: #0EA5E9; --info-bg: #EFF6FF; --info-border: #93C5FD;
/* Faixas dos KPI (dashboard) */
--kpi-pacientes: #2563EB;
--kpi-sessoes: #0891B2;
--kpi-pendencias: #EA580C;
--kpi-documentos: #16A34A;
}
/* ============================================================
Aliases legado -> v2 (Fase 2, Bloco B). roadmap-brand §2/§10.
Telas migradas (.ui-v2) reusam CSS antigo que consome os tokens
escuros como --dark-bg, --card-bg, --text-main, --aurora-lilac, --btn-gradient.
Esses nomes legados sao remapeados para os tokens claros do v2, para
o CONTEUDO das paginas migradas ficar claro sem reescrever o CSS.
:root.ui-v2 (0,2,0) vence o :root legado e o :root proprio das paginas,
independente da ordem de carga. So aplica em .ui-v2.
============================================================ */
:root[data-ui="v2"], :root.ui-v2 {
--dark-bg: var(--bg-page);
--light-bg: var(--bg-surface);
--card-bg: var(--bg-surface);
--card-bg-hover: var(--bg-subtle);
--text-main: var(--text-primary);
--text-soft: var(--text-secondary);
--aurora-lilac: var(--primary);
--aurora-lilac-light: var(--primary);
--aurora-blue: var(--primary);
--aurora-gold: #D97706;
--btn-gradient: var(--primary);
--success: #16A34A;
--warning: #EA580C;
--error: #DC2626;
--info: #0EA5E9;
}
/* Dark mode v2 — PREPARADO, não ativado (Bloco 0, item 5).
Opt-in duplo: a tela precisa estar em .ui-v2 E marcar
[data-theme="dark"]. Dark mode como entrega fica para depois. */
:root[data-ui="v2"][data-theme="dark"],
.ui-v2[data-theme="dark"] {
--bg-page: #0B1120;
--bg-header: #111827;
--bg-header-hover: #1F2937;
--bg-surface: #111827;
--bg-subtle: #0F172A;
--border: #1F2937;
--border-input: #334155;
--text-primary: #E2E8F0;
--text-secondary: #94A3B8;
--text-muted: #64748B;
--primary: #3B82F6;
--primary-hover: #60A5FA;
--accent: #A78BFA;
--accent-soft: #312E81;
--success-bg: #052E16;
--warning-bg: #2B1306;
--error-bg: #2A0B0B;
--info-bg: #0C1E33;
}