/* ============================================================ design.css — camada compartilhada do MeuPet ------------------------------------------------------------ Fonte única dos tokens. Nasceu extraindo o :root da carteira.css (piloto aprovado) para que as demais abas HERDEM em vez de copiar: token duplicado vira token divergente na terceira cópia. Carregar ANTES de carteira.css / pets.css — elas consomem daqui. TEMA ESCURO: escrito e DORMENTE. Acende com data-theme="dark" no . Continua dormente de propósito enquanto o cabeçalho, o drawer e as abas ainda em Tailwind forem claros — meia casca escura parece defeito, não sofisticação. Quando a última aba migrar, é uma linha. NÃO segue prefers-color-scheme pelo mesmo motivo. Nomes em português para casar com o resto do código do projeto. ============================================================ */ :root { /* Marca */ --mp-teal: #016464; --mp-teal-dark: #015555; --mp-teal-light: #017a7a; --mp-laranja: #ffab69; --mp-laranja-dark:#e8924a; /* Superfícies — a metáfora é papel sobre uma mesa */ --mp-mesa: #eef2f5; --mp-papel: #ffffff; --mp-papel-borda: #e4e9ef; --mp-papel-vinco: #f4f7fa; /* Texto */ --mp-tinta: #16242e; --mp-tinta-media: #5a6b78; --mp-tinta-fraca: #8b9aa6; /* Selos de situação */ --mp-ok-bg: #e8f6f0; --mp-ok-fg: #04724d; --mp-ok-borda: #b6e3d0; --mp-alerta-bg: #fff4e5; --mp-alerta-fg: #9a5b06; --mp-alerta-borda:#ffd9a8; --mp-vencida-bg: #fdecec; --mp-vencida-fg:#b3261e; --mp-vencida-borda:#f7c5c2; --mp-neutro-bg: #eef1f4; --mp-neutro-fg: #5a6b78; --mp-neutro-borda:#dde3e9; /* Escala de urgência — usada pelas barrinhas de "Falta" na aba Eventos. É uma RAMPA (vencido -> longe), não um par semântico como os selos: por isso vive separada, com cor cheia (a barra é um bloco sólido pequeno e precisa de saturação para se ler a 12px). */ --mp-urg-vencido: #dc2626; --mp-urg-horas: #ea580c; --mp-urg-dias: #16a34a; --mp-urg-meses: #2563eb; --mp-urg-ano: #9333ea; --mp-urg-off: #dde3e9; /* barra apagada */ /* Espécies — mesma família dos selos, para o badge de tipo do pet */ --mp-esp-cachorro-bg: #fdf0dd; --mp-esp-cachorro-fg: #8a5a10; --mp-esp-gato-bg: #f3ecfd; --mp-esp-gato-fg: #6b3fa0; --mp-esp-passaro-bg: #e6f4fd; --mp-esp-passaro-fg: #1a6493; --mp-esp-peixe-bg: #e6f0fd; --mp-esp-peixe-fg: #1d4ed8; --mp-esp-outro-bg: #eef1f4; --mp-esp-outro-fg: #5a6b78; /* Profundidade — contato curto + difusa longa (sombra única achata) */ --mp-sombra-1: 0 1px 2px rgba(16,36,46,.06), 0 1px 3px rgba(16,36,46,.04); --mp-sombra-2: 0 2px 4px rgba(16,36,46,.05), 0 8px 20px -6px rgba(16,36,46,.12); --mp-sombra-3: 0 4px 8px rgba(16,36,46,.06), 0 20px 40px -12px rgba(16,36,46,.18); --mp-raio: 14px; --mp-raio-lg: 20px; --mp-mola: cubic-bezier(.22,1,.36,1); } :root[data-theme="dark"] { --mp-mesa: #0e1519; --mp-papel: #18232a; --mp-papel-borda: #2a3942; --mp-papel-vinco: #1e2b33; --mp-tinta: #e8eef2; --mp-tinta-media: #9fb0bc; --mp-tinta-fraca: #6d8090; --mp-teal: #2b9d9d; --mp-teal-dark: #238585; --mp-teal-light: #3fb5b5; --mp-ok-bg: #0f2f24; --mp-ok-fg: #5fd6aa; --mp-ok-borda: #1d5240; --mp-alerta-bg: #33240e; --mp-alerta-fg: #f0b563; --mp-alerta-borda:#5c4520; --mp-vencida-bg: #351717; --mp-vencida-fg:#f28b82; --mp-vencida-borda:#5e2a28; --mp-neutro-bg: #1e2b33; --mp-neutro-fg: #9fb0bc; --mp-neutro-borda:#2f3f49; /* Rampa de urgência no escuro: mesma ordem, tons que sobrevivem ao fundo #18232a — os originais (ex. #16a34a) somem contra papel escuro. */ --mp-urg-vencido: #f04438; --mp-urg-horas: #f79009; --mp-urg-dias: #32d583; --mp-urg-meses: #53b1fd; --mp-urg-ano: #b692f6; --mp-urg-off: #2f3f49; --mp-esp-cachorro-bg: #33240e; --mp-esp-cachorro-fg: #e0aa5f; --mp-esp-gato-bg: #241a35; --mp-esp-gato-fg: #b794e6; --mp-esp-passaro-bg: #0e2633; --mp-esp-passaro-fg: #6fc0e8; --mp-esp-peixe-bg: #111f38; --mp-esp-peixe-fg: #7ba3ec; --mp-esp-outro-bg: #1e2b33; --mp-esp-outro-fg: #9fb0bc; --mp-sombra-1: 0 1px 2px rgba(0,0,0,.4); --mp-sombra-2: 0 2px 4px rgba(0,0,0,.3), 0 8px 20px -6px rgba(0,0,0,.5); --mp-sombra-3: 0 4px 8px rgba(0,0,0,.35), 0 20px 40px -12px rgba(0,0,0,.6); } /* ── Primitivas compartilhadas ──────────────────────────── Prefixo .mp- — usáveis por qualquer aba já migrada. */ .mp-topo { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .mp-topo h2 { font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--mp-tinta); } .mp-topo-sub { font-size: .8rem; color: var(--mp-tinta-media); margin: .15rem 0 0; } .mp-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--mp-papel-borda); background: var(--mp-papel); color: var(--mp-tinta-media); border-radius: 10px; padding: .5rem .8rem; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s var(--mp-mola); } .mp-btn:hover { background: var(--mp-papel-vinco); color: var(--mp-teal); border-color: var(--mp-teal); } .mp-btn:active { transform: scale(.97); } .mp-btn .material-symbols-outlined { font-size: 1.05rem; } .mp-btn-primario { background: var(--mp-teal); border-color: var(--mp-teal); color: #fff; } .mp-btn-primario:hover { background: var(--mp-teal-dark); border-color: var(--mp-teal-dark); color: #fff; } /* Ação de marca (laranja) — o CTA da tela, um por vez */ .mp-btn-cta { background: var(--mp-laranja); border-color: var(--mp-laranja); color: #3d2b13; font-weight: 700; } .mp-btn-cta:hover { background: var(--mp-laranja-dark); border-color: var(--mp-laranja-dark); color: #3d2b13; } .mp-selo { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .01em; border: 1px solid transparent; white-space: nowrap; } /* Pílula de filtro. O estado ativo é a classe .ativo — NUNCA troca de classe por replace() de string, que foi como a aba Eventos fazia com as classes do Tailwind e quebra silenciosamente assim que o markup muda. */ .mp-chip { border: 1px solid var(--mp-papel-borda); background: var(--mp-papel); color: var(--mp-tinta-media); border-radius: 999px; padding: .35rem .8rem; font-size: .74rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .16s, color .16s, border-color .16s, transform .16s var(--mp-mola); } .mp-chip:hover { background: var(--mp-papel-vinco); color: var(--mp-teal); border-color: var(--mp-teal); } .mp-chip:active { transform: scale(.96); } .mp-chip.ativo { background: var(--mp-teal); border-color: var(--mp-teal); color: #fff; box-shadow: var(--mp-sombra-1); } .mp-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; } /* Foco visível de verdade: conforto visual inclui quem usa teclado. */ .mp-escopo :is(button, select, input, textarea, a, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--mp-teal) 55%, transparent); outline-offset: 2px; border-radius: 8px; } /* Quem pediu menos movimento recebe menos movimento. */ @media (prefers-reduced-motion: reduce) { .mp-escopo *, .mp-escopo *::before, .mp-escopo *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }