/* ============================================================
   Caderno — sistema de design
   Tema claro: papel de caderno de contas, creme e tinta quente.
   Tema escuro: mesma paleta à luz de abajur.
   A paleta de gráficos passou nos seis testes do validador
   (banda de luminosidade, croma, separação para daltonismo,
   piso de visão normal e contraste) nos DOIS temas.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- superfícies ---------- */
  --papel:        #faf6f0;
  --papel-fundo:  #f1e9dd;
  --carta:        #fffdfa;
  --carta-afunda: #f6efe5;
  --carta-alta:   #ffffff;

  /* ---------- tinta ---------- */
  --tinta:    #1b1613;
  --tinta-2:  #5c5349;
  --tinta-3:  #8a7d6f;
  --tinta-4:  #ab9e8f;

  /* ---------- linhas ---------- */
  --linha:       #e7ddce;
  --linha-forte: #d6c7b1;
  --anel:        rgba(27, 22, 19, 0.08);

  /* ---------- acento e semântica ---------- */
  --acento:       #0e6b59;
  --acento-forte: #0a5245;
  --acento-tenue: #dcece6;
  --acento-tinta: #0a4b3f;

  --receita:       #16734f;
  --receita-tenue: #dcefe4;
  --despesa:       #b2492a;
  --despesa-tenue: #f7e3da;
  --ouro:          #9a7418;
  --ouro-tenue:    #f6ecd6;

  /* ---------- estado ---------- */
  --bom:     #0f7a2e;
  --atencao: #b07a0a;
  --grave:   #c2541f;
  --critico: #bb2f2f;

  /* ---------- gráficos: superfície e cromo ---------- */
  --viz-superficie: #fffdfa;
  --viz-grade:      #ece3d5;
  --viz-eixo:       #d6c7b1;
  --viz-rotulo:     #8a7d6f;

  /* ---------- gráficos: 8 faixas categóricas, ordem fixa ---------- */
  --serie-1: #3b6fd4;  /* azul      */
  --serie-2: #d2622f;  /* terracota */
  --serie-3: #00957f;  /* verde-água*/
  --serie-4: #b38a12;  /* ocre      */
  --serie-5: #d1587f;  /* rosa      */
  --serie-6: #5d8a1f;  /* oliva     */
  --serie-7: #7b5bd6;  /* violeta   */
  --serie-8: #c0392f;  /* tijolo    */
  --serie-outros: #9c8e7e;

  /* ---------- rampa sequencial (um matiz, 1 = menor valor) ---------- */
  --rampa-1: #6ac3aa;
  --rampa-2: #46b095;
  --rampa-3: #249b7e;
  --rampa-4: #0d8669;
  --rampa-5: #0c6e57;
  --rampa-6: #0a5745;
  --rampa-7: #083d31;

  /* ---------- tipografia ---------- */
  --fonte-ui:     "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-vitri:  "Fraunces", Georgia, "Times New Roman", serif;
  --vitri-ajuste: "SOFT" 40, "WONK" 1;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.3125rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.375rem;
  --t-3xl:  3.25rem;
  --t-heroi: clamp(2.75rem, 9vw, 4.25rem);

  /* ---------- espaço ---------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;

  /* ---------- forma ---------- */
  --r-sm:  7px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-pilula: 999px;

  /* ---------- profundidade ---------- */
  --sombra-1: 0 1px 2px rgba(53, 38, 24, 0.05), 0 1px 1px rgba(53, 38, 24, 0.04);
  --sombra-2: 0 2px 4px rgba(53, 38, 24, 0.05), 0 6px 16px -6px rgba(53, 38, 24, 0.12);
  --sombra-3: 0 4px 8px rgba(53, 38, 24, 0.06), 0 18px 40px -14px rgba(53, 38, 24, 0.22);
  --sombra-4: 0 10px 24px rgba(53, 38, 24, 0.10), 0 32px 64px -20px rgba(53, 38, 24, 0.32);

  /* ---------- movimento ---------- */
  --mola:   cubic-bezier(0.34, 1.26, 0.64, 1);
  --suave:  cubic-bezier(0.32, 0.72, 0, 1);
  --rapido: 140ms;
  --medio:  260ms;
  --lento:  520ms;

  /* ---------- medidas ---------- */
  --trilho-l: 232px;
  --palco-max: 1180px;
  --grao-opacidade: 0.22;
}

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

    --papel:        #14110e;
    --papel-fundo:  #0d0b09;
    --carta:        #1c1814;
    --carta-afunda: #17130f;
    --carta-alta:   #241f19;

    --tinta:    #f4ece0;
    --tinta-2:  #c0b2a0;
    --tinta-3:  #8f8273;
    --tinta-4:  #6d6356;

    --linha:       #2d2721;
    --linha-forte: #413a31;
    --anel:        rgba(244, 236, 224, 0.10);

    --acento:       #4ec9a8;
    --acento-forte: #6fdcbf;
    --acento-tenue: #14332b;
    --acento-tinta: #a6e8d4;

    --receita:       #52ce9f;
    --receita-tenue: #15332a;
    --despesa:       #ec8661;
    --despesa-tenue: #35201a;
    --ouro:          #d9a845;
    --ouro-tenue:    #33280f;

    --bom:     #3bbd5c;
    --atencao: #d9a845;
    --grave:   #e0834f;
    --critico: #e06a62;

    --viz-superficie: #1c1814;
    --viz-grade:      #2a241e;
    --viz-eixo:       #413a31;
    --viz-rotulo:     #8f8273;

    --serie-1: #5286e4;
    --serie-2: #d9744a;
    --serie-3: #22ab90;
    --serie-4: #ad8216;
    --serie-5: #dc6690;
    --serie-6: #7aa32b;
    --serie-7: #9079de;
    --serie-8: #d85a48;
    --serie-outros: #857a6c;

    --rampa-1: #21584a;
    --rampa-2: #16715c;
    --rampa-3: #0d8d72;
    --rampa-4: #1aab8b;
    --rampa-5: #4ac4a8;
    --rampa-6: #7bd8c1;
    --rampa-7: #aeead9;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
    --sombra-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 20px 44px -16px rgba(0, 0, 0, 0.7);
    --sombra-4: 0 12px 28px rgba(0, 0, 0, 0.55), 0 36px 72px -24px rgba(0, 0, 0, 0.8);

    --grao-opacidade: 0;
  }
}

/* ============ TEMA ESCURO — escolhido pelo botão ============ */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --papel:        #14110e;
  --papel-fundo:  #0d0b09;
  --carta:        #1c1814;
  --carta-afunda: #17130f;
  --carta-alta:   #241f19;

  --tinta:    #f4ece0;
  --tinta-2:  #c0b2a0;
  --tinta-3:  #8f8273;
  --tinta-4:  #6d6356;

  --linha:       #2d2721;
  --linha-forte: #413a31;
  --anel:        rgba(244, 236, 224, 0.10);

  --acento:       #4ec9a8;
  --acento-forte: #6fdcbf;
  --acento-tenue: #14332b;
  --acento-tinta: #a6e8d4;

  --receita:       #52ce9f;
  --receita-tenue: #15332a;
  --despesa:       #ec8661;
  --despesa-tenue: #35201a;
  --ouro:          #d9a845;
  --ouro-tenue:    #33280f;

  --bom:     #3bbd5c;
  --atencao: #d9a845;
  --grave:   #e0834f;
  --critico: #e06a62;

  --viz-superficie: #1c1814;
  --viz-grade:      #2a241e;
  --viz-eixo:       #413a31;
  --viz-rotulo:     #8f8273;

  --serie-1: #5286e4;
  --serie-2: #d9744a;
  --serie-3: #22ab90;
  --serie-4: #ad8216;
  --serie-5: #dc6690;
  --serie-6: #7aa32b;
  --serie-7: #9079de;
  --serie-8: #d85a48;
  --serie-outros: #857a6c;

  --rampa-1: #21584a;
  --rampa-2: #16715c;
  --rampa-3: #0d8d72;
  --rampa-4: #1aab8b;
  --rampa-5: #4ac4a8;
  --rampa-6: #7bd8c1;
  --rampa-7: #aeead9;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
  --sombra-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 20px 44px -16px rgba(0, 0, 0, 0.7);
  --sombra-4: 0 12px 28px rgba(0, 0, 0, 0.55), 0 36px 72px -24px rgba(0, 0, 0, 0.8);

  --grao-opacidade: 0;
}

/* ============ TEMA CLARO — escolhido pelo botão ============ */
:root[data-tema="claro"] { color-scheme: light; }