/* Cor do tema (arquivo compartilhado entre agenda e todo — mantenha iguais). Cada cor segue o esquema tonal do Google (Material): --accent tom médio: destaque (Salvar, concluída, links, foco) --tonal tom claro: cor auxiliar (botão +, iniciais, seleção) --tonal-ink tom escuro: texto/ícone por cima do --tonal A escolha fica em (salva no aparelho). */ :root { --accent: #5f6368; --tonal: #e8eaed; --tonal-ink: #3c4043; /* cinza (padrão) */ } :root[data-color="azul"] { --accent: #0b57d0; --tonal: #d3e3fd; --tonal-ink: #041e49; } :root[data-color="verde"] { --accent: #146c2e; --tonal: #c4eed0; --tonal-ink: #072711; } :root[data-color="vermelho"] { --accent: #b3261e; --tonal: #f9dedc; --tonal-ink: #410e0b; } :root[data-color="rosa"] { --accent: #b0136e; --tonal: #ffd8ec; --tonal-ink: #3d0022; } :root[data-color="roxo"] { --accent: #6750a4; --tonal: #eaddff; --tonal-ink: #21005d; } :root[data-color="laranja"] { --accent: #8b5000; --tonal: #ffdcbe; --tonal-ink: #2c1600; } :root[data-color="petroleo"] { --accent: #006a6a; --tonal: #b2f0ef; --tonal-ink: #002020; } @media (prefers-color-scheme: dark) { :root { --accent: #9aa0a6; --tonal: #3c4043; --tonal-ink: #e8eaed; } :root[data-color="azul"] { --accent: #a8c7fa; --tonal: #0842a0; --tonal-ink: #d3e3fd; } :root[data-color="verde"] { --accent: #6dd58c; --tonal: #0f5223; --tonal-ink: #c4eed0; } :root[data-color="vermelho"] { --accent: #f2b8b5; --tonal: #8c1d18; --tonal-ink: #f9dedc; } :root[data-color="rosa"] { --accent: #ffafd3; --tonal: #8c0053; --tonal-ink: #ffd8ec; } :root[data-color="roxo"] { --accent: #d0bcff; --tonal: #4f378b; --tonal-ink: #eaddff; } :root[data-color="laranja"] { --accent: #ffb870; --tonal: #6a3c00; --tonal-ink: #ffdcbe; } :root[data-color="petroleo"] { --accent: #80d5d4; --tonal: #004f4f; --tonal-ink: #b2f0ef; } } /* botão da paleta + menu de cores */ .theme-wrap { position: relative; } .theme-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 212px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); animation: theme-pop .14s ease-out; transform-origin: top right; } .theme-menu[hidden] { display: none; } .theme-menu p { margin: 0 0 10px 2px; font-size: .8rem; color: var(--muted); } .swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .swatch { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--sw); color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .swatch svg { opacity: 0; } .swatch[aria-checked="true"] { outline: 2px solid var(--sw); outline-offset: 2px; } .swatch[aria-checked="true"] svg { opacity: 1; } @keyframes theme-pop { from { opacity: 0; transform: scale(.96); } } @media (prefers-reduced-motion: reduce) { .theme-menu { animation: none; } }