/* ──────────────────────────────────────────────────────────────── Material 3 design tokens (https://m3.material.io/) Paleta única do app — "Verde AB Finanças", seed #0f9b7e (a mesma cor do gradiente do header e das telas de autenticação), gerada com a biblioteca oficial @material/material-color-utilities. Cores estendidas (receita/investimento/aviso) geradas do mesmo jeito; "despesa" continua mapeada ao role "error" do M3. Esta é a ÚNICA fonte de verdade para os tokens de cor — não há mais troca de paleta em runtime (ver js/theme.js): a alternância claro/escuro é feita só via atributo [data-theme="dark"] no . Nomenclatura oficial M3: --md-sys-color-*, --md-sys-shape-corner-*, --md-sys-elevation-level*, --md-sys-motion-*, --md-extended-color-*. ──────────────────────────────────────────────────────────────── */ :root{ color-scheme: light; /* Cores fixas e bem saturadas pros indicadores de urgência (bolinha de "vencendo"/"vencido") — os roles error/aviso do M3 são ajustados pra contraste de texto, o que os deixa escurecidos/dessaturados demais pra uma bolinha decorativa pequena. Não variam por tema/seed. */ --md-status-dot-warning:#FFC107; --md-status-dot-error:#E53935; /* ── Cor — tema claro (default, e único: Verde AB Finanças, seed #0f9b7e) ── */ --md-sys-color-primary:#0f9b7e; --md-sys-color-on-primary:#ffffff; --md-sys-color-primary-container:#d3eee8; --md-sys-color-on-primary-container:#174f43; --md-sys-color-inverse-primary:#aee0d6; --md-sys-color-secondary:#517061; --md-sys-color-on-secondary:#ffffff; --md-sys-color-secondary-container:#e0ebe6; --md-sys-color-on-secondary-container:#364940; --md-sys-color-tertiary:#983e51; --md-sys-color-on-tertiary:#ffffff; --md-sys-color-tertiary-container:#f1d0d7; --md-sys-color-on-tertiary-container:#511f29; --md-sys-color-error:#ba1a1a; --md-sys-color-on-error:#ffffff; --md-sys-color-error-container:#ffdad6; --md-sys-color-on-error-container:#93000a; --md-sys-color-background:#f9fafa; --md-sys-color-on-background:#2a2e2c; --md-sys-color-surface:#f9fafa; --md-sys-color-on-surface:#2a2e2c; --md-sys-color-surface-variant:#e3e8e6; --md-sys-color-on-surface-variant:#424d47; --md-sys-color-surface-dim:#d6dcd9; --md-sys-color-surface-bright:#f9fafa; --md-sys-color-surface-container-lowest:#ffffff; --md-sys-color-surface-container-low:#f4f6f5; --md-sys-color-surface-container:#eef1f0; --md-sys-color-surface-container-high:#e9eceb; --md-sys-color-surface-container-highest:#e3e8e6; --md-sys-color-outline:#6c7f75; --md-sys-color-outline-variant:#c2cbc7; --md-sys-color-inverse-surface:#2a322e; --md-sys-color-inverse-on-surface:#f1f3f2; --md-sys-color-shadow:#000000; --md-sys-color-scrim:#000000; --md-sys-color-surface-tint:#0f9b7e; /* ── Cores estendidas (domínio financeiro do app) — tema claro ── */ --md-extended-color-receita-color:#006a66; --md-extended-color-receita-on-color:#ffffff; --md-extended-color-receita-color-container:#6bf8f0; --md-extended-color-receita-on-color-container:#00201e; --md-extended-color-investimento-color:#0061a4; --md-extended-color-investimento-on-color:#ffffff; --md-extended-color-investimento-color-container:#d1e4ff; --md-extended-color-investimento-on-color-container:#001d36; --md-extended-color-aviso-color:#944a00; --md-extended-color-aviso-on-color:#ffffff; --md-extended-color-aviso-color-container:#ffdcc5; --md-extended-color-aviso-on-color-container:#301400; --md-extended-color-success-color:#146C34; --md-extended-color-success-on-color:#ffffff; --md-extended-color-success-color-container:#D7F3E0; --md-extended-color-success-on-color-container:#146C34; --md-extended-color-info-color:#3498DB; --md-extended-color-info-on-color:#ffffff; --md-extended-color-info-color-container:#D6EAF8; --md-extended-color-info-on-color-container:#3498DB; --md-extended-color-lilac-color:#6A1B9A; --md-extended-color-lilac-on-color:#ffffff; --md-extended-color-lilac-color-container:#EDE0F8; --md-extended-color-lilac-on-color-container:#6A1B9A; /* ── Forma (shape scale) — igual nos dois temas ── */ --md-sys-shape-corner-none:0px; --md-sys-shape-corner-extra-small:4px; --md-sys-shape-corner-small:8px; --md-sys-shape-corner-medium:12px; --md-sys-shape-corner-large:16px; --md-sys-shape-corner-extra-large:28px; --md-sys-shape-corner-full:999px; /* ── Elevação — sombras padrão M3 (independentes de tema) ── */ --md-sys-elevation-level0:none; --md-sys-elevation-level1:0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15); --md-sys-elevation-level2:0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15); --md-sys-elevation-level3:0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15); --md-sys-elevation-level4:0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15); --md-sys-elevation-level5:0 4px 4px 0 rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15); /* ── Tipografia — Poppins ── */ --md-ref-typeface-brand:'Poppins', sans-serif; --md-ref-typeface-plain:'Poppins', sans-serif; --md-sys-typescale-display-large-size:57px; --md-sys-typescale-display-large-line-height:64px; --md-sys-typescale-display-medium-size:45px; --md-sys-typescale-display-medium-line-height:52px; --md-sys-typescale-display-small-size:36px; --md-sys-typescale-display-small-line-height:44px; --md-sys-typescale-headline-large-size:32px; --md-sys-typescale-headline-large-line-height:40px; --md-sys-typescale-headline-medium-size:28px; --md-sys-typescale-headline-medium-line-height:36px; --md-sys-typescale-headline-small-size:24px; --md-sys-typescale-headline-small-line-height:32px; --md-sys-typescale-title-small-size:14px; --md-sys-typescale-title-small-line-height:20px; --md-sys-typescale-title-large-size:22px; --md-sys-typescale-title-large-line-height:28px; --md-sys-typescale-title-medium-size:16px; --md-sys-typescale-title-medium-line-height:24px; --md-sys-typescale-body-large-size:16px; --md-sys-typescale-body-large-line-height:24px; --md-sys-typescale-body-medium-size:14px; --md-sys-typescale-body-medium-line-height:20px; --md-sys-typescale-body-small-size:12px; --md-sys-typescale-body-small-line-height:16px; --md-sys-typescale-label-large-size:14px; --md-sys-typescale-label-large-line-height:20px; --md-sys-typescale-label-medium-size:12px; --md-sys-typescale-label-medium-line-height:16px; /* ── Movimento (motion system M3) — easing e duração oficiais ── */ --md-sys-motion-easing-standard:cubic-bezier(.2,0,0,1); --md-sys-motion-easing-standard-accelerate:cubic-bezier(.3,0,1,1); --md-sys-motion-easing-standard-decelerate:cubic-bezier(0,0,0,1); --md-sys-motion-easing-emphasized:cubic-bezier(.2,0,0,1); --md-sys-motion-easing-emphasized-accelerate:cubic-bezier(.3,0,.8,.15); --md-sys-motion-easing-emphasized-decelerate:cubic-bezier(.05,.7,.1,1); --md-sys-motion-easing-legacy:cubic-bezier(.4,0,.2,1); --md-sys-motion-duration-short1:50ms; --md-sys-motion-duration-short2:100ms; --md-sys-motion-duration-short3:150ms; --md-sys-motion-duration-short4:200ms; --md-sys-motion-duration-medium1:250ms; --md-sys-motion-duration-medium2:300ms; --md-sys-motion-duration-medium3:350ms; --md-sys-motion-duration-medium4:400ms; --md-sys-motion-duration-long1:450ms; --md-sys-motion-duration-long2:500ms; --md-sys-motion-duration-long3:550ms; --md-sys-motion-duration-long4:600ms; --md-sys-motion-duration-extra-long1:700ms; --md-sys-motion-duration-extra-long4:1000ms; /* Camada de estado (state layer) — opacidade de overlay em hover/focus/press */ --md-sys-state-hover-opacity:.08; --md-sys-state-focus-opacity:.10; --md-sys-state-pressed-opacity:.10; --md-sys-state-dragged-opacity:.16; } :root[data-theme="dark"]{ color-scheme: dark; --md-sys-color-primary:#aee0d6; --md-sys-color-on-primary:#1c4a40; --md-sys-color-primary-container:#2e6056; --md-sys-color-on-primary-container:#d3eee8; --md-sys-color-inverse-primary:#0f9b7e; --md-sys-color-secondary:#c6d2cc; --md-sys-color-on-secondary:#2d3933; --md-sys-color-secondary-container:#3b4f45; --md-sys-color-on-secondary-container:#e0ebe6; --md-sys-color-tertiary:#e6bcc5; --md-sys-color-on-tertiary:#471f27; --md-sys-color-tertiary-container:#6b2e3b; --md-sys-color-on-tertiary-container:#f4d7dd; --md-sys-color-error:#ffb4ab; --md-sys-color-on-error:#690005; --md-sys-color-error-container:#93000a; --md-sys-color-on-error-container:#ffdad6; --md-sys-color-background:#101312; --md-sys-color-on-background:#e3e8e6; --md-sys-color-surface:#101312; --md-sys-color-on-surface:#e3e8e6; --md-sys-color-surface-variant:#424d47; --md-sys-color-on-surface-variant:#c2cbc7; --md-sys-color-surface-dim:#101312; --md-sys-color-surface-bright:#343d38; --md-sys-color-surface-container-lowest:#0c0e0d; --md-sys-color-surface-container-low:#171c1a; --md-sys-color-surface-container:#1c211f; --md-sys-color-surface-container-high:#262c29; --md-sys-color-surface-container-highest:#2f3733; --md-sys-color-outline:#899a91; --md-sys-color-outline-variant:#424d47; --md-sys-color-inverse-surface:#e3e8e6; --md-sys-color-inverse-on-surface:#2a322e; --md-sys-color-shadow:#000000; --md-sys-color-scrim:#000000; --md-sys-color-surface-tint:#aee0d6; --md-extended-color-receita-color:#48dbd3; --md-extended-color-receita-on-color:#003735; --md-extended-color-receita-color-container:#00504d; --md-extended-color-receita-on-color-container:#6bf8f0; --md-extended-color-investimento-color:#9fcaff; --md-extended-color-investimento-on-color:#003259; --md-extended-color-investimento-color-container:#00497d; --md-extended-color-investimento-on-color-container:#d1e4ff; --md-extended-color-aviso-color:#ffb783; --md-extended-color-aviso-on-color:#4f2500; --md-extended-color-aviso-color-container:#713700; --md-extended-color-aviso-on-color-container:#ffdcc5; --md-extended-color-success-color:#8BD9A0; --md-extended-color-success-on-color:#00391C; --md-extended-color-success-color-container:#0F5132; --md-extended-color-success-on-color-container:#B8F0C8; --md-extended-color-info-color:#8ECDF5; --md-extended-color-info-on-color:#003653; --md-extended-color-info-color-container:#1B4A63; --md-extended-color-info-on-color-container:#C5E7FB; --md-extended-color-lilac-color:#D8B4F5; --md-extended-color-lilac-on-color:#3D1A5C; --md-extended-color-lilac-color-container:#54348A; --md-extended-color-lilac-on-color-container:#EDE0F8; }