/* ===========================================
   Café 360 — Design Tokens
   Sistema rebuildado: escala de 4, sombras verdes,
   tipografia hierárquica, manuscrita estratégica.
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ====== CORES — paleta café/terra ====== */
  --verde-escuro:    #3E5638;
  --verde-medio:     #5C7F47;
  --verde-claro:     #7B9B5E;
  --verde-suave:     #E8EFE2;   /* fundo suave verde 8% */
  --dourado:         #C9A961;
  --dourado-claro:   #E0C896;
  --dourado-suave:   #F5EDD8;   /* fundo suave dourado */
  --branco:          #FFFFFF;
  --bege-papel:      #FAF6EB;
  --bege-medio:      #E8DFC2;
  --bege-suave:      #F4EFDF;

  /* Cores funcionais */
  --sucesso:         #4A6741;
  --sucesso-suave:   #E5EFDD;
  --atencao:         #C99B41;
  --atencao-suave:   #FBF0D9;
  --alerta:          #B5443A;
  --alerta-suave:    #F8DDD8;
  --info:            #4178A0;
  --info-suave:      #DDE9F4;

  /* Texto */
  --texto-principal:    #2A2520;
  --texto-secundario:   #5C5550;
  --texto-claro:        #8B847E;
  --texto-invertido:    #FFFFFF;
  --texto-dourado:      #8B6A1F;

  /* Fronteiras (linhas sutis) */
  --linha-fina:      rgba(62, 86, 56, 0.08);
  --linha-media:     rgba(62, 86, 56, 0.16);
  --linha-caderno:   rgba(62, 86, 56, 0.05);

  /* ====== ESPAÇAMENTO — sistema de 4 ====== */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md:  12px;
  --gap-lg:  16px;
  --gap-xl:  24px;
  --gap-xxl: 32px;
  --gap-3xl: 48px;
  --gap-4xl: 64px;

  /* Aliases legados */
  --espacamento-xs: 4px;
  --espacamento-sm: 8px;
  --espacamento-md: 16px;
  --espacamento-lg: 24px;
  --espacamento-xl: 32px;

  /* ====== RAIO — só 3 níveis ====== */
  --raio-sm:    8px;    /* botões, inputs */
  --raio-md:    14px;   /* cards */
  --raio-lg:    20px;   /* destaques grandes */
  --raio-full:  999px;  /* pills, círculos */
  --borda-raio: 14px;   /* alias legado */

  /* ====== SOMBRAS — verdes sutis (não cinzas neutras) ====== */
  --sombra-sutil:  0 1px 2px rgba(62, 86, 56, 0.06);
  --sombra-leve:   0 2px 6px rgba(62, 86, 56, 0.08);
  --sombra-media:  0 4px 12px rgba(62, 86, 56, 0.10);
  --sombra-forte:  0 8px 20px rgba(62, 86, 56, 0.14);
  --sombra-fab:    0 4px 14px rgba(62, 86, 56, 0.28),
                   0 2px 4px rgba(62, 86, 56, 0.18);
  --sombra-dourada: 0 4px 12px rgba(201, 169, 97, 0.22);

  /* ====== TIPOGRAFIA ====== */
  --fonte-principal: 'Inter', system-ui, -apple-system, "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-manuscrita: 'Caveat', "Bradley Hand", "Brush Script MT", cursive;

  /* Escala tipográfica — 5 níveis claros */
  --fs-hero:        36px;  /* métrica hero (sacas, R$) */
  --fs-display:     28px;  /* page title forte */
  --fs-titulo:      22px;  /* h1 */
  --fs-subtitulo:   18px;  /* h2 */
  --fs-base:        16px;  /* body */
  --fs-medio:       17px;  /* body grande (Ficha pra família) */
  --fs-pequeno:     14px;  /* descrições, meta */
  --fs-mini:        13px;  /* caption */
  --fs-micro:       11px;  /* labels uppercase */

  /* Manuscrita */
  --fs-cursive-md:  22px;
  --fs-cursive-lg:  28px;
  --fs-cursive-xl:  34px;

  /* Aliases legados */
  --tamanho-xs:           12px;
  --tamanho-sm:           14px;
  --tamanho-base:         16px;
  --tamanho-md:           18px;
  --tamanho-lg:           20px;
  --tamanho-titulo:       22px;
  --tamanho-titulo-grande: 28px;

  /* Pesos */
  --peso-light:  300;
  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;

  /* Line-heights */
  --lh-tight:   1.0;   /* hero metrics */
  --lh-snug:    1.2;   /* títulos */
  --lh-normal:  1.5;   /* body */
  --lh-relaxed: 1.6;   /* texto longo, ficha */

  /* Letter-spacing */
  --ls-tight:    -0.5px;  /* hero */
  --ls-titulo:   -0.2px;  /* títulos */
  --ls-normal:   0;
  --ls-wide:     0.5px;   /* labels uppercase */

  /* Toque mínimo */
  --toque-minimo: 48px;
  --toque-conforto: 56px;

  /* Transições */
  --transicao-rapida: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-media:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta:  400ms cubic-bezier(0.4, 0, 0.2, 1);
  --bounce:           250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Linhas do caderno (pautado sutil) */
  --linha-pautada: rgba(62, 86, 56, 0.06);
}

/* Modo fonte grande — produtor com vista cansada */
.fonte-grande {
  --fs-hero:      40px;
  --fs-display:   32px;
  --fs-titulo:    24px;
  --fs-subtitulo: 20px;
  --fs-base:      18px;
  --fs-medio:     19px;
  --fs-pequeno:   16px;
}

/* ====== MODO ESCURO ======
 * Paleta café tostado: fundos pretos com leve verde, dourado preserva
 * pra manter identidade. Não usa preto puro pra reduzir cansaço visual
 * em ambiente externo (luz solar penetrando no celular).
 */
body.tema-escuro {
  --branco:          #1A1814;   /* "branco" agora é fundo escuro */
  --bege-papel:      #15130F;   /* pano de fundo principal */
  --bege-medio:      #2A2620;
  --bege-suave:      #1F1C18;

  --texto-principal:    #F0EBE2;
  --texto-secundario:   #B8B3A8;
  --texto-claro:        #8B8478;
  --texto-invertido:    #2A2520;
  --texto-dourado:      #E0C896;

  --linha-fina:      rgba(232, 223, 194, 0.08);
  --linha-media:     rgba(232, 223, 194, 0.15);
  --linha-caderno:   rgba(232, 223, 194, 0.05);

  --verde-suave:     rgba(94, 124, 71, 0.18);
  --dourado-suave:   rgba(201, 169, 97, 0.15);

  --sucesso-suave:   rgba(74, 103, 65, 0.18);
  --atencao-suave:   rgba(201, 155, 65, 0.18);
  --alerta-suave:    rgba(181, 68, 58, 0.18);
  --info-suave:      rgba(65, 120, 160, 0.18);

  --sombra-sutil:  0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-leve:   0 2px 6px rgba(0, 0, 0, 0.4);
  --sombra-media:  0 4px 12px rgba(0, 0, 0, 0.5);
  --sombra-forte:  0 8px 20px rgba(0, 0, 0, 0.6);
}

/* Mídias precisam de tratamento especial em dark — algumas ficam OK,
   outras ficam dramáticas demais. Estas são as exceções: */
body.tema-escuro img:not([data-tema-ok]) {
  filter: brightness(0.95);
}

/* Hero verde fica mais escuro em dark mode pra não brilhar */
body.tema-escuro .hero-section {
  background: linear-gradient(135deg, #2A3D26 0%, #3E5638 100%);
}
body.tema-escuro .hero-pro {
  background: linear-gradient(135deg, #2A3D26 0%, #3E5638 60%, #856300 100%);
}

/* Paper rules + estética caderno são mais sutis em dark */
body.tema-escuro .anotacao-item::before,
body.tema-escuro .pagina-caderno {
  --linha-pautada: rgba(232, 223, 194, 0.04);
}