/* ────────────────────────────────────────────────────────────────
   Material 3 design tokens (https://m3.material.io/)

   Paleta única do Speak BR — seed #2f6fed (o azul já usado nos
   ícones/seta da interface), gerada com a biblioteca oficial
   @material/material-color-utilities. Design system independente do
   AbFinanças — mesma metodologia/nomenclatura M3, paleta e domínio
   próprios.

   Esta é a ÚNICA fonte de verdade para os tokens de cor (tema único,
   sem alternância claro/escuro).

   Nomenclatura oficial M3: --md-sys-color-*, --md-sys-shape-corner-*,
   --md-sys-elevation-level*, --md-sys-motion-*, --md-extended-color-*.
   ──────────────────────────────────────────────────────────────── */

:root{
  color-scheme: light;

  /* ── Cor — tema claro (default: Azul Speak BR, seed #2f6fed) ── */
  --md-sys-color-primary:#0056d0;
  --md-sys-color-on-primary:#ffffff;
  --md-sys-color-primary-container:#dae2ff;
  --md-sys-color-on-primary-container:#001847;
  --md-sys-color-inverse-primary:#b1c5ff;

  --md-sys-color-secondary:#585e71;
  --md-sys-color-on-secondary:#ffffff;
  --md-sys-color-secondary-container:#dce2f9;
  --md-sys-color-on-secondary-container:#151b2c;

  --md-sys-color-tertiary:#735472;
  --md-sys-color-on-tertiary:#ffffff;
  --md-sys-color-tertiary-container:#fed7f9;
  --md-sys-color-on-tertiary-container:#2b122c;

  --md-sys-color-error:#ba1a1a;
  --md-sys-color-on-error:#ffffff;
  --md-sys-color-error-container:#ffdad6;
  --md-sys-color-on-error-container:#410002;

  --md-sys-color-background:#fbf8fd;
  --md-sys-color-on-background:#1b1b1f;
  --md-sys-color-surface:#fbf8fd;
  --md-sys-color-on-surface:#1b1b1f;
  --md-sys-color-surface-variant:#e1e2ec;
  --md-sys-color-on-surface-variant:#44464f;
  --md-sys-color-surface-dim:#dbd9dd;
  --md-sys-color-surface-bright:#fbf8fd;
  --md-sys-color-surface-container-lowest:#ffffff;
  --md-sys-color-surface-container-low:#eef2f9;
  --md-sys-color-surface-container:#efedf1;
  --md-sys-color-surface-container-high:#e9e7ec;
  --md-sys-color-surface-container-highest:#e4e2e6;

  --md-sys-color-outline:#757780;
  --md-sys-color-outline-variant:#c5c6d0;
  --md-sys-color-inverse-surface:#303034;
  --md-sys-color-inverse-on-surface:#f2f0f4;
  --md-sys-color-shadow:#000000;
  --md-sys-color-scrim:#000000;
  --md-sys-color-surface-tint:#0056d0;

  /* ── Cores estendidas (domínio: feedback de pronúncia) — tema claro ── */
  --md-extended-color-success-color:#016e2f;
  --md-extended-color-success-on-color:#ffffff;
  --md-extended-color-success-color-container:#9af7a8;
  --md-extended-color-success-on-color-container:#002109;

  /* ── 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 — Lato ── */
  --md-ref-typeface-brand:'Lato', sans-serif;
  --md-ref-typeface-plain:'Lato', sans-serif;
  --md-sys-typescale-headline-small-size:24px;
  --md-sys-typescale-headline-small-line-height:32px;
  --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-duration-short2:100ms;
  --md-sys-motion-duration-short4:200ms;
  --md-sys-motion-duration-medium2:300ms;
  --md-sys-motion-duration-medium4:400ms;

  /* 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;
}