/* ==========================================================================
   FinanKey 4.0 - Design tokens
   Escuro neutro: preto, cinzas e branco. Sem cor de fundo, sem cenário.
   A cor entra só onde carrega significado — entrada, saída, alerta, categoria.

   Regra: nenhuma cor tem sua única definição dentro de media query.
   As cores de gráfico foram validadas para daltonismo contra a superfície
   escura real antes de entrarem aqui.
   ========================================================================== */

:root {
  /* ---- Espaço (base 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;
  --sp-16: 4rem;

  /* ---- Raio ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ---- Tipografia ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Layout ---- */
  --shell-max: 30rem;

  /*
   * A LARGURA DA COLUNA DE CONTEÚDO, NUM LUGAR SÓ.
   *
   * Ela muda em três pontos de quebra, e três coisas dependem dela: a própria
   * coluna e os dois botões flutuantes, que precisam encostar na borda direita
   * DELA e não no meio da tela.
   *
   * Antes os botões miravam --shell-max (30rem) com uma conta de "metade da
   * tela menos metade da coluna". Funcionava enquanto a coluna tinha 30rem;
   * quando ela cresceu, os botões ficaram boiando no meio do conteúdo, em cima
   * do gráfico. O número mágico não estava errado — estava desatualizado, que
   * é o que acontece com todo número escrito duas vezes.
   */
  --coluna-max: 30rem;
  --header-h: 3.5rem;
  --nav-h: 4.25rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /*
   * Dois apelidos de texto que o CSS e o JS usavam sem nunca definir. Variável
   * indefinida não dá erro: a cor simplesmente não era aplicada, e o texto
   * herdava a do pai — às vezes a certa, por sorte. Apontam para as cores do
   * tema, então valem no claro e no escuro sem repetir nada.
   */
  --text-1: var(--text);
  --text-muted: var(--text-3);

  /* ---- Camadas ---- */
  --z-nav: 40;
  --z-header: 50;
  --z-sheet: 100;
  --z-toast: 200;
}

/* ==========================================================================
   TEMA CLARO
   ========================================================================== */
:root {
  color-scheme: light;

  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f0f0f0;
  --surface-inset: #ebebeb;
  --overlay: rgba(0, 0, 0, 0.45);

  --text: #0a0a0a;
  --text-2: #525252;
  --text-3: #7d7d7d;
  --text-inverse: #ffffff;

  --border: #e5e5e5;
  --border-strong: #d4d4d4;

  --positive: #0f9d63;
  --positive-soft: #e3f7ee;
  --positive-text: #07714a;

  --negative: #d92d44;
  --negative-soft: #fdeaed;
  --negative-text: #a81a2f;

  --warning: #b8860b;
  --warning-soft: #fbf2dd;
  --warning-text: #85610a;

  --info: #3b74e8;
  --info-soft: #e9effc;

  --neutral-soft: #f0f0f0;

  --chart-1: #3b74e8;
  --chart-2: #0f9d63;
  --chart-3: #8b5cf6;
  --chart-4: #b8860b;
  --chart-5: #0e9aa8;
  --chart-6: #d92d44;
  --chart-grid: #e5e5e5;
}

/* ---- Acentos, tema claro. O padrão é neutro: preto sobre branco. ---- */
:root,
:root[data-accent="mono"] {
  --accent: #171717;
  --accent-hover: #000000;
  --accent-soft: #f0f0f0;
  --accent-text: #171717;
  --accent-contrast: #ffffff;
}
:root[data-accent="blue"] {
  --accent: #2f6fed;
  --accent-hover: #245cd4;
  --accent-soft: #e8efff;
  --accent-text: #1d4ed8;
  --accent-contrast: #ffffff;
}
:root[data-accent="green"] {
  --accent: #0f9d63;
  --accent-hover: #0c8353;
  --accent-soft: #e3f7ee;
  --accent-text: #07714a;
  --accent-contrast: #ffffff;
}
:root[data-accent="violet"] {
  --accent: #6d4fe0;
  --accent-hover: #5c3fd0;
  --accent-soft: #eeeaff;
  --accent-text: #5433c4;
  --accent-contrast: #ffffff;
}

/* ==========================================================================
   TEMA ESCURO - neutro
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0a0a0a;
    --surface: #141414;
    --surface-2: #1a1a1a;
    --surface-3: #242424;
    --surface-inset: #0f0f0f;
    --overlay: rgba(0, 0, 0, 0.7);

    --text: #fafafa;
    --text-2: #b8b8b8;
    --text-3: #8f8f8f;
    --text-inverse: #0a0a0a;

    --border: #262626;
    --border-strong: #3d3d3d;

    --positive: #34d399;
    --positive-soft: #0d2a21;
    --positive-text: #6ee7b7;

    --negative: #f87171;
    --negative-soft: #2c1416;
    --negative-text: #fca5a5;

    --warning: #e0a93a;
    --warning-soft: #2a2110;
    --warning-text: #f3c96b;

    --info: #7fa5ff;
    --info-soft: #151c2b;

    --neutral-soft: #1f1f1f;

    /* Rampa monocromatica: do branco gelo ao cinza medio. A identidade de
       cada categoria vem do rotulo na legenda, nunca so da luminosidade. */
    --chart-1: #fafafa;
    --chart-2: #d9d9d9;
    --chart-3: #b8b8b8;
    --chart-4: #979797;
    --chart-5: #7a7a7a;
    --chart-6: #5e5e5e;
    --chart-grid: #262626;
  }

  /* Padrão no escuro: branco. Botão branco sobre preto é o contraste máximo
     possível e não introduz uma cor de marca onde não precisa de uma. */
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"])[data-accent="mono"] {
    --accent: #fafafa;
    --accent-hover: #ffffff;
    --accent-soft: #1f1f1f;
    --accent-text: #fafafa;
    --accent-contrast: #0a0a0a;
  }
  :root:not([data-theme="light"])[data-accent="blue"] {
    --accent: #6f9cff;
    --accent-hover: #8db1ff;
    --accent-soft: #131c2e;
    --accent-text: #a9c4ff;
    --accent-contrast: #05101f;
  }
  :root:not([data-theme="light"])[data-accent="green"] {
    --accent: #34d399;
    --accent-hover: #5ce0b0;
    --accent-soft: #0d2a21;
    --accent-text: #86efc4;
    --accent-contrast: #04160f;
  }
  :root:not([data-theme="light"])[data-accent="violet"] {
    --accent: #a78bfa;
    --accent-hover: #bda5ff;
    --accent-soft: #1d1830;
    --accent-text: #cbb8ff;
    --accent-contrast: #0d0722;
  }
}

/* ---- Escolha explícita de escuro ---- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --surface-3: #242424;
  --surface-inset: #0f0f0f;
  --overlay: rgba(0, 0, 0, 0.7);

  --text: #fafafa;
  --text-2: #b8b8b8;
  --text-3: #8f8f8f;
  --text-inverse: #0a0a0a;

  --border: #262626;
  --border-strong: #3d3d3d;

  --positive: #34d399;
  --positive-soft: #0d2a21;
  --positive-text: #6ee7b7;

  --negative: #f87171;
  --negative-soft: #2c1416;
  --negative-text: #fca5a5;

  --warning: #e0a93a;
  --warning-soft: #2a2110;
  --warning-text: #f3c96b;

  --info: #7fa5ff;
  --info-soft: #151c2b;

  --neutral-soft: #1f1f1f;

  --chart-1: #fafafa;
  --chart-2: #d9d9d9;
  --chart-3: #b8b8b8;
  --chart-4: #979797;
  --chart-5: #7a7a7a;
  --chart-6: #5e5e5e;
  --chart-grid: #262626;
}

:root[data-theme="dark"],
:root[data-theme="dark"][data-accent="mono"] {
  --accent: #fafafa;
  --accent-hover: #ffffff;
  --accent-soft: #1f1f1f;
  --accent-text: #fafafa;
  --accent-contrast: #0a0a0a;
}
:root[data-theme="dark"][data-accent="blue"] {
  --accent: #6f9cff;
  --accent-hover: #8db1ff;
  --accent-soft: #131c2e;
  --accent-text: #a9c4ff;
  --accent-contrast: #05101f;
}
:root[data-theme="dark"][data-accent="green"] {
  --accent: #34d399;
  --accent-hover: #5ce0b0;
  --accent-soft: #0d2a21;
  --accent-text: #86efc4;
  --accent-contrast: #04160f;
}
:root[data-theme="dark"][data-accent="violet"] {
  --accent: #a78bfa;
  --accent-hover: #bda5ff;
  --accent-soft: #1d1830;
  --accent-text: #cbb8ff;
  --accent-contrast: #0d0722;
}