/* ═══════════════════════════════════════════════════════════════ PLATAFORMA DR. ANDRÉ — TOKENS DE DESIGN OFICIAIS · v1 (06/07/2026) Contrato visual da Plataforma. Copiar este arquivo para o repo e importar em toda tela. NENHUMA cor/fonte/espaçamento hardcoded. Mudança neste arquivo = mudança de contrato (DEC + COM novo). ═══════════════════════════════════════════════════════════════ */ :root { /* ── Cores · tema claro (padrão) ── */ --fundo: #FAFAF9; /* nunca branco puro */ --fundo-2: #EFEDE9; /* nível intermediário: cabeçalhos de seção/agrupadores (v1.1) */ --superficie: #FFFFFF; /* cartões */ --texto: #1A2B3B; /* nunca preto puro */ --texto-2: #5C6B7A; /* secundário — mínimo p/ texto legível */ --borda: #E7E5E4; /* acento único da marca */ --acento: #0F766E; --acento-suave: #F0FDFA; --acento-borda: #99F6E4; /* semânticas — só para significado, nunca decoração */ --ok: #15803D; --ok-suave: #F0FDF4; --ok-borda: #BBF7D0; --atencao: #B45309; --atencao-suave: #FFFBEB; --atencao-borda: #FDE68A; --erro: #B91C1C; --erro-suave: #FEF2F2; --erro-borda:#FECACA; --info: #1D4ED8; --info-suave: #EFF6FF; --info-borda:#BFDBFE; /* tipografia */ --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tam-corpo: 14px; /* mínimo para texto corrente */ --tam-secund: 13px; /* mínimo absoluto — nada abaixo disso */ --tam-titulo-3: 16px; --tam-titulo-2: 20px; --tam-titulo-1: 24px; --tam-tv: 18px; /* mínimo em telas de TV/família */ /* espaçamento — grade de 8px */ --esp-1: 4px; --esp-2: 8px; --esp-3: 16px; --esp-4: 24px; --esp-5: 32px; --esp-6: 48px; /* forma */ --raio: 8px; --raio-g: 12px; --sombra: 0 1px 3px rgba(26,43,59,.08), 0 1px 2px rgba(26,43,59,.04); } /* ── Tema escuro — ativar com ── Obrigatório onde houver toggle (Evolução: paciente e TV). */ [data-tema="escuro"] { --fundo: #111826; --fundo-2: #222E42; --superficie: #1B2434; --texto: #E8EDF4; --texto-2: #94A3B8; --borda: #2B3648; --acento: #2DD4BF; --acento-suave: #13312E; --acento-borda: #134E4A; --ok: #4ADE80; --ok-suave: #132A1C; --ok-borda: #14532D; --atencao: #FBBF24; --atencao-suave: #2E2411; --atencao-borda: #78350F; --erro: #F87171; --erro-suave: #2E1515; --erro-borda:#7F1D1D; --info: #60A5FA; --info-suave: #12233D; --info-borda:#1E3A8A; --sombra: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); } /* ── Base obrigatória ── */ body { font-family: var(--fonte); font-size: var(--tam-corpo); background: var(--fundo); color: var(--texto); line-height: 1.5; } /* algarismos tabulares — OBRIGATÓRIO em dose, valor, hora, medida */ .num { font-variant-numeric: tabular-nums; } /* ── Componentes padrão (usar; não recriar variantes) ── */ .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .btn { background: var(--acento); color: #fff; border: none; border-radius: var(--raio); padding: 10px 18px; font-size: var(--tam-corpo); font-weight: 500; cursor: pointer; } .btn-secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); } .badge { display: inline-block; font-size: var(--tam-secund); font-weight: 600; padding: 3px 10px; border-radius: 99px; } .badge-ok { background: var(--ok-suave); color: var(--ok); } .badge-atencao { background: var(--atencao-suave); color: var(--atencao); } .badge-erro { background: var(--erro-suave); color: var(--erro); } .badge-info { background: var(--info-suave); color: var(--info); } .badge-acento { background: var(--acento-suave); color: var(--acento); } /* balão de agenda — nome do paciente dentro, cor pelo status */ .balao { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 10px 14px; border: 1px solid; } .balao-ok { background: var(--ok-suave); border-color: var(--ok-borda); } .balao-atencao { background: var(--atencao-suave); border-color: var(--atencao-borda); } .balao-erro { background: var(--erro-suave); border-color: var(--erro-borda); } .balao-acento { background: var(--acento-suave); border-color: var(--acento-borda); } /* ── Regras que os agentes devem cumprir (auditáveis) ── 1. Nenhum font-size abaixo de 13px (TV: abaixo de 18px). 2. Nenhuma cor hexadecimal fora deste arquivo. 3. Emoji não é ícone — usar SVG (Lucide) com stroke currentColor. 4. Dado externo nunca entra em HTML sem escape (COM-003/prov.10). 5. Toda tela funciona nos dois temas antes de ir a produção (nos produtos onde o toggle existir). */