/* ==========================================================================
   FINANCEIRO DIÁRIO — Design Tokens (SaaS LTQ Educação)
   Fonte da verdade: kit "Identidade de Marca - Financeiro Diário".
   Paleta oficial (HEX exatos):
     Verde Escuro #0B2124  · Branco #F4F4F4 · Preto #000000 · Verde Claro #28A445
   Verde #28A445 é ACENTO / AÇÃO (CTA), nunca preenchimento dominante.
   Fonte da marca: Manrope.
   ========================================================================== */

:root {
  /* ---- Marca (imutáveis, HEX exatos do kit) ---- */
  --fd-brand-green-dark: #0B2124;   /* superfície escura / brand */
  --fd-brand-white:      #F4F4F4;   /* superfície clara */
  --fd-brand-black:      #000000;
  --fd-brand-green:      #28A445;   /* primária / acento / CTA */

  /* ---- Tipografia ---- */
  --fd-font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fd-fw-regular: 400;
  --fd-fw-medium:  500;
  --fd-fw-semibold:600;
  --fd-fw-bold:    700;
  --fd-fw-extrabold:800;

  --fd-text-display: 40px;  /* 800 */
  --fd-text-h1:      32px;  /* 800 */
  --fd-text-h2:      24px;  /* 700 */
  --fd-text-h3:      18px;  /* 700 */
  --fd-text-body:    15px;  /* 400 — base UI */
  --fd-text-small:   13px;  /* 500 */
  --fd-text-metric:  28px;  /* 700 tabular-nums */

  /* ---- Raio (a pílula do logo → raios generosos) ---- */
  --fd-radius-sm:   8px;
  --fd-radius-md:   12px;
  --fd-radius-lg:   16px;
  --fd-radius-xl:   24px;
  --fd-radius-full: 9999px;

  /* ---- Sombra (light) ---- */
  --fd-shadow-sm: 0 1px 2px rgba(11,33,36,.06);
  --fd-shadow-md: 0 4px 12px rgba(11,33,36,.08);
  --fd-shadow-lg: 0 12px 32px rgba(11,33,36,.12);

  /* =========================================================
     Tema LIGHT (superfície #F4F4F4) — padrão
     ========================================================= */
  --fd-bg:            #F4F4F4;
  --fd-surface:       #FFFFFF;
  --fd-surface-2:     #ECEFEE;
  --fd-border:        #D9DEDD;
  --fd-border-strong: #C3CBCA;
  --fd-text:          #0B2124;
  --fd-text-muted:    #5B6A6C;
  --fd-text-subtle:   #83908F;

  --fd-primary:        #28A445;   /* fill CTA (rótulo branco) */
  --fd-primary-hover:  #218C3A;
  --fd-primary-strong: #157A32;   /* verde de TEXTO sobre claro (AA 5.4:1) */
  --fd-on-primary:     #FFFFFF;
  --fd-primary-soft:   rgba(40,164,69,.10);
  --fd-ring:           rgba(40,164,69,.40);

  --fd-success: #157A32;
  --fd-warning: #955A00;
  --fd-danger:  #C0392B;
  --fd-info:    #0B2124;
}

/* =========================================================
   Tema DARK (superfície #0B2124)
   Aplique via .dark, [data-theme="dark"] ou prefers-color-scheme.
   #28A445 sobre #0B2124 = 5.15:1 → serve como TEXTO/acento direto.
   ========================================================= */
.dark, [data-theme="dark"] {
  --fd-bg:            #0B2124;
  --fd-surface:       #123033;
  --fd-surface-2:     #193C40;
  --fd-border:        #244B4F;
  --fd-border-strong: #315D61;
  --fd-text:          #F4F4F4;
  --fd-text-muted:    #9DB0B1;
  --fd-text-subtle:   #6E8082;

  --fd-primary:        #28A445;
  --fd-primary-hover:  #33B851;
  --fd-primary-strong: #34C455;   /* verde de TEXTO sobre escuro */
  --fd-on-primary:     #FFFFFF;
  --fd-primary-soft:   rgba(40,164,69,.16);
  --fd-ring:           rgba(40,164,69,.55);

  --fd-success: #34C455;
  --fd-warning: #E0A93B;
  --fd-danger:  #E06455;
  --fd-info:    #F4F4F4;

  --fd-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --fd-shadow-md: 0 6px 18px rgba(0,0,0,.40);
  --fd-shadow-lg: 0 16px 40px rgba(0,0,0,.45);
}

/* ==========================================================================
   ACRÉSCIMOS DESTA PÁGINA (link na bio · Lucas Pontes)
   Tudo acima veio intacto de DS-financeiro-diario/tokens/tokens.css.
   Abaixo só o que o DS não define: coluna, espaço, alvo de toque e tempo.
   Nenhuma cor nova. Se precisar de cor, use um token da marca acima.
   ========================================================================== */

:root {
  /* Coluna. A página é um link na bio: nasce e morre com largura de celular,
     mesmo no desktop. Não existe breakpoint que a transforme em grade. */
  --fd-col:      520px;
  --fd-col-text: 34ch;   /* medida de leitura dos parágrafos do miolo */

  /* Espaço (múltiplos de 4) */
  --fd-s1:  4px;
  --fd-s2:  8px;
  --fd-s3: 12px;
  --fd-s4: 16px;
  --fd-s5: 24px;
  --fd-s6: 32px;
  --fd-s7: 48px;
  --fd-s8: 64px;
  --fd-s9: 88px;

  /* Alvo de toque mínimo */
  --fd-tap: 44px;

  /* Tipografia da página: o DS dá os tamanhos de UI, aqui entram os de
     display fluidos e a régua de rótulo em caixa alta. */
  --fd-text-hero: clamp(30px, 8.2vw, 42px);
  --fd-text-sec:  clamp(21px, 5.4vw, 26px);
  --fd-text-lead: 16px;
  --fd-track-tight: -.03em;   /* Manrope 800 em corpo grande */
  --fd-track-label: .14em;    /* rótulos 12px em caixa alta */

  /* Movimento */
  --fd-dur-fast: 180ms;
  --fd-dur:      280ms;
  --fd-dur-slow: 520ms;
  --fd-ease:     cubic-bezier(.2, .7, .3, 1);
}