/* ==========================================================
   Tokens de design — Lastro
   Tema claro é o padrão; o escuro vale quando o sistema pede
   (e o usuário não forçou o claro) ou quando forçado.
   ========================================================== */
:root {
  /* Tipografia */
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.875rem;  /* 14 */
  --fs-md: 1rem;      /* 16 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.5rem;    /* 24 */
  --fs-2xl: 2rem;     /* 32 */
  --fs-3xl: 2.625rem; /* 42 */
  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* Espaçamento (escala de 4px) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem;

  /* Raios: hierarquia em vez de um raio único */
  --radius-sm: 6px;    /* campos, botões */
  --radius-md: 10px;   /* itens de lista, toasts */
  --radius-lg: 16px;   /* painéis */
  --radius-pill: 999px;

  /* Layout */
  --sidebar-w: 268px;
  --header-h: 64px;
  --bottomnav-h: 64px;
  --content-max: 1200px;

  /* Movimento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;

  /* Marca (não muda com o tema) */
  --navy-900: #0C1B30;
  --navy-800: #12263F;
  --navy-700: #1B3557;
  --navy-500: #2F5D8A;
  --navy-200: #B9CBE0;
  --on-navy: #EAF1F8;
  --on-navy-muted: #9DB2CB;

  /* Cores — tema claro */
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-2: #F7F9FB;
  --text: #17212F;
  --text-muted: #5B6778;
  --border: #DCE2EA;
  --border-strong: #C3CCD8;

  --primary: #1B3557;
  --primary-hover: #12263F;
  --on-primary: #FFFFFF;
  --focus: #2F7BD0;

  --income: #1E7F5C;
  --income-soft: #E3F3EC;
  --expense: #B8443F;
  --expense-soft: #F8E6E4;
  --warning: #9A6A12;
  --warning-soft: #FBF0D9;
  --info: #2F5D8A;
  --info-soft: #E4EDF6;

  --shadow-sm: 0 1px 2px rgba(18, 38, 63, .06);
  --shadow-md: 0 4px 16px rgba(18, 38, 63, .08), 0 1px 3px rgba(18, 38, 63, .06);
  --shadow-lg: 0 18px 48px rgba(12, 27, 48, .18);
  --backdrop: rgba(12, 27, 48, .45);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1626;
    --surface: #132036;
    --surface-2: #182842;
    --text: #E5ECF4;
    --text-muted: #9AA9BC;
    --border: #24354F;
    --border-strong: #33496A;

    --primary: #7FB0E6;
    --primary-hover: #A2C6EE;
    --on-primary: #0C1626;
    --focus: #8CC0FF;

    --income: #43C08E;
    --income-soft: #133328;
    --expense: #E5857D;
    --expense-soft: #3A1E1F;
    --warning: #E2B455;
    --warning-soft: #33290F;
    --info: #8EB6E0;
    --info-soft: #172C46;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
    --backdrop: rgba(0, 0, 0, .6);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0C1626;
  --surface: #132036;
  --surface-2: #182842;
  --text: #E5ECF4;
  --text-muted: #9AA9BC;
  --border: #24354F;
  --border-strong: #33496A;

  --primary: #7FB0E6;
  --primary-hover: #A2C6EE;
  --on-primary: #0C1626;
  --focus: #8CC0FF;

  --income: #43C08E;
  --income-soft: #133328;
  --expense: #E5857D;
  --expense-soft: #3A1E1F;
  --warning: #E2B455;
  --warning-soft: #33290F;
  --info: #8EB6E0;
  --info-soft: #172C46;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
  --backdrop: rgba(0, 0, 0, .6);

  color-scheme: dark;
}