/* ==========================================================================
   Protocolo Verde — fundacao visual (v2)

   Identidade: comida de verdade, constancia, energia.
   - Fundo creme quente (nao cinza): parece cozinha, nao planilha.
   - Verde folha como acao, manga como energia, e uma cor por refeicao
     (cafe manga, lanche coral, almoco verde, lanche da tarde lilas,
     jantar anil, ceia ardosia) para reconhecer o momento do dia de longe.
   - O numero e o heroi: anel grande, tipografia display, mono tabular.

   REGRA: nenhum atributo style="" no HTML. A CSP bloqueia (de proposito).
   Atraso de animacao em cascata vem de data-i="N" (ver fim deste arquivo).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Superficies ---------- */
  --bg: #f6f3ec;
  --bg-2: #efebe1;
  --surface: #ffffff;
  --surface-2: #f3f0e8;
  --surface-3: #e8e4d9;
  --glass: rgb(255 255 255 / 0.72);

  /* ---------- Texto ---------- */
  --ink: #10221a;
  --ink-2: #2e4238;
  --muted: #5c6a61;
  --faint: #747f77;

  /* ---------- Linhas ---------- */
  --line: #e4e0d4;
  --line-strong: #d0cbbd;
  /* Borda de campo/checkbox: 3:1 sobre branco (a --line-strong some). */
  --line-input: #8a8576;
  /* Anel de foco: o manga dava 2:1 no claro. */
  --focus: #0b5a36;

  /* ---------- Verde (acao principal) ---------- */
  --leaf: #0f7a48;
  --leaf-hover: #0b6a3e;
  --leaf-strong: #0b5a36;
  --leaf-soft: #dcf1e4;
  --leaf-tint: #eff8f2;
  --on-leaf: #ffffff;
  --on-c: #ffffff;
  --on-mango: #2a1800;

  /* ---------- Manga (energia, calorias) ---------- */
  --mango: #f29a0c;
  --mango-ink: #8f5600;
  --mango-soft: #ffefd2;
  --on-mango: #2a1800;

  /* ---------- Cores de apoio (uma por refeicao) ---------- */
  --coral: #ee6a4c;
  --coral-soft: #fde6df;
  --coral-ink: #9a3520;
  --lilac: #7c62d6;
  --lilac-soft: #ece7fb;
  --lilac-ink: #4c3699;
  --indigo: #3f56c8;
  --indigo-soft: #e2e7fa;
  --indigo-ink: #27388f;
  --slate: #5d6d86;
  --slate-soft: #e5e9ef;
  --slate-ink: #3a475c;

  /* ---------- Agua ---------- */
  --water: #1c8fb4;
  --water-2: #5cc3e0;
  --water-ink: #0e5d78;
  --water-soft: #dcf1f8;

  /* ---------- Estado ---------- */
  --danger: #a93522;
  --danger-soft: #fbe3de;
  --ok: #0f7a48;
  --ok-soft: #dcf1e4;
  --warn: #8f5600;
  --warn-soft: #ffefd2;

  /* ---------- Faixa escura (hero, login) ---------- */
  --hero: #0b3324;
  --hero-2: #124a34;
  --hero-3: #1a6646;
  --hero-ink: #f1f7f3;
  --hero-muted: #a6c8b6;

  /* ---------- Macros ---------- */
  --m-prot: #148a53;
  --m-carb: #f29a0c;
  --m-gord: #ee6a4c;

  /* ---------- Tipografia ---------- */
  --f-display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Figtree', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-2xs: 0.6875rem;
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem);
  --t-3xl: clamp(2rem, 1.4rem + 3vw, 3rem);
  --t-4xl: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);

  /* ---------- Espaco ---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 56px;
  --s10: 72px;

  /* ---------- Raio ---------- */
  --r-xs: 10px;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-full: 999px;

  /* ---------- Sombra (em camadas, como luz de verdade) ---------- */
  --sh-1: 0 1px 1px rgb(16 34 26 / 0.04), 0 2px 6px -2px rgb(16 34 26 / 0.06);
  --sh-2: 0 1px 2px rgb(16 34 26 / 0.04), 0 6px 16px -6px rgb(16 34 26 / 0.12),
    0 18px 34px -18px rgb(16 34 26 / 0.18);
  --sh-3: 0 2px 4px rgb(16 34 26 / 0.05), 0 16px 32px -12px rgb(16 34 26 / 0.2),
    0 40px 80px -30px rgb(16 34 26 / 0.3);
  --sh-leaf: 0 8px 22px -8px rgb(20 138 83 / 0.55);
  --sh-mango: 0 8px 22px -8px rgb(242 154 12 / 0.5);
  --ring-focus: 0 0 0 4px rgb(242 154 12 / 0.35);
  --brilho: inset 0 1px 0 rgb(255 255 255 / 0.7);

  /* ---------- Movimento ----------
     --e-out (expo-out) e o padrao: sai rapido e assenta devagar.
     --e-spring passa um pouco do ponto e volta: check, troca de valor, pop. */
  --d-1: 140ms;
  --d-2: 240ms;
  --d-3: 420ms;
  --d-4: 720ms;
  --d-5: 1100ms;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);

  /* ---------- Layout ---------- */
  --max-w: 1260px;
  --nav-h: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- Tema escuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #09110d;
    --bg-2: #0d1712;
    --surface: #16221c;
    --surface-2: #1d2b24;
    --surface-3: #26372e;
    --glass: rgb(18 28 23 / 0.72);
    --ink: #ecf3ee;
    --ink-2: #c8d7ce;
    --muted: #94a69b;
    --faint: #6f8176;
    --line: #283b31;
    --line-strong: #3a5244;
    --line-input: #647a6d;
    --focus: var(--mango);
    --leaf: #4fd08f;
    --leaf-hover: #6edda3;
    --leaf-strong: #8be6b6;
    --leaf-soft: #153626;
    --leaf-tint: #10281c;
    --on-leaf: #032517;
  --on-c: #06120c;
  --on-mango: #2a1800;
    --on-c: #06120c;
    --on-mango: #2a1800;
    --mango: #ffb43f;
    --mango-ink: #ffc976;
    --mango-soft: #3a2a0c;
    --coral: #ff8a6e;
    --coral-soft: #3b1f17;
    --coral-ink: #ffb19f;
    --lilac: #a38cf0;
    --lilac-soft: #261f42;
    --lilac-ink: #c9bbff;
    --indigo: #7e93f2;
    --indigo-soft: #1c2448;
    --indigo-ink: #b3c0ff;
    --slate: #93a3bd;
    --slate-soft: #1e2532;
    --slate-ink: #c3cede;
    --water: #4cc2e3;
    --water-2: #8adcf0;
    --water-ink: #9de2f3;
    --water-soft: #102f3a;
    --danger: #ff8c73;
    --danger-soft: #3a1c16;
    --ok: #4fd08f;
    --ok-soft: #153626;
    --warn: #ffc976;
    --warn-soft: #3a2a0c;
    --hero: #0d2c20;
    --hero-2: #14402e;
    --hero-3: #1c5a3f;
    --m-prot: #4fd08f;
    --m-carb: #ffb43f;
    --m-gord: #ff8a6e;
    --sh-1: 0 1px 2px rgb(0 0 0 / 0.35);
    --sh-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 10px 24px -10px rgb(0 0 0 / 0.6);
    --sh-3: 0 4px 8px rgb(0 0 0 / 0.35), 0 24px 56px -20px rgb(0 0 0 / 0.75);
    --sh-leaf: 0 8px 24px -8px rgb(79 208 143 / 0.35);
    --sh-mango: 0 8px 24px -8px rgb(255 180 63 / 0.3);
    --brilho: inset 0 1px 0 rgb(255 255 255 / 0.06);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #09110d;
  --bg-2: #0d1712;
  --surface: #16221c;
  --surface-2: #1d2b24;
  --surface-3: #26372e;
  --glass: rgb(18 28 23 / 0.72);
  --ink: #ecf3ee;
  --ink-2: #c8d7ce;
  --muted: #94a69b;
  --faint: #6f8176;
  --line: #283b31;
  --line-strong: #3a5244;
  --line-input: #647a6d;
  --focus: var(--mango);
  --leaf: #4fd08f;
  --leaf-hover: #6edda3;
  --leaf-strong: #8be6b6;
  --leaf-soft: #153626;
  --leaf-tint: #10281c;
  --on-leaf: #032517;
  --mango: #ffb43f;
  --mango-ink: #ffc976;
  --mango-soft: #3a2a0c;
  --coral: #ff8a6e;
  --coral-soft: #3b1f17;
  --coral-ink: #ffb19f;
  --lilac: #a38cf0;
  --lilac-soft: #261f42;
  --lilac-ink: #c9bbff;
  --indigo: #7e93f2;
  --indigo-soft: #1c2448;
  --indigo-ink: #b3c0ff;
  --slate: #93a3bd;
  --slate-soft: #1e2532;
  --slate-ink: #c3cede;
  --water: #4cc2e3;
  --water-2: #8adcf0;
  --water-ink: #9de2f3;
  --water-soft: #102f3a;
  --danger: #ff8c73;
  --danger-soft: #3a1c16;
  --ok: #4fd08f;
  --ok-soft: #153626;
  --warn: #ffc976;
  --warn-soft: #3a2a0c;
  --hero: #0d2c20;
  --hero-2: #14402e;
  --hero-3: #1c5a3f;
  --m-prot: #4fd08f;
  --m-carb: #ffb43f;
  --m-gord: #ff8a6e;
  --sh-1: 0 1px 2px rgb(0 0 0 / 0.35);
  --sh-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 10px 24px -10px rgb(0 0 0 / 0.6);
  --sh-3: 0 4px 8px rgb(0 0 0 / 0.35), 0 24px 56px -20px rgb(0 0 0 / 0.75);
  --sh-leaf: 0 8px 24px -8px rgb(79 208 143 / 0.35);
  --sh-mango: 0 8px 24px -8px rgb(255 180 63 / 0.3);
    --brilho: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-3xl);
  font-weight: 800;
}
h2 {
  font-size: var(--t-2xl);
}
h3 {
  font-size: var(--t-lg);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--leaf);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  border-radius: 4px;
}
a:hover {
  color: var(--leaf-hover);
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Todo SVG de icone ganha tamanho padrao: nunca mais icone gigante. */
svg[data-icone] {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
legend {
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--mango-soft);
  color: var(--ink);
}

:focus-visible {
  outline: 2.5px solid var(--focus, var(--mango));
  outline-offset: 2px;
}

.num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 3px solid var(--bg);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* ==========================================================================
   Movimento — vocabulario usado no app inteiro
   ========================================================================== */

@keyframes pv-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pv-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pv-pop {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pv-slide-in-r {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pv-slide-in-l {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pv-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

@keyframes pv-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pv-shimmer {
  to {
    background-position: -200% 0;
  }
}

@keyframes pv-ping {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  80%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes pv-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pv-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(4%, -5%) scale(1.08);
  }
  66% {
    transform: translate(-4%, 3%) scale(0.94);
  }
}

@keyframes pv-float {
  0%,
  100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translateY(-14px) rotate(calc(var(--rot, 0deg) + 6deg));
  }
}

@keyframes pv-wave {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes pv-bump {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.16);
  }
}

@keyframes pv-wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(8deg);
  }
}

@keyframes pv-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--mango) 70%, transparent));
  }
}

@keyframes pv-shake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(3px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-5px);
  }
  40%,
  60% {
    transform: translateX(5px);
  }
}

/* Confete: cada pedaco recebe --dx, --dy e --rz pelo JS (CSSOM, permitido pela CSP). */
@keyframes pv-confete {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rz)) scale(0.6);
  }
}

/* ---------- Entrada em cascata ----------
   O elemento declara data-anim e data-i="N"; o atraso sai daqui.
   (style="--i:N" seria o caminho obvio, mas a CSP bloqueia style inline.) */
[data-anim] {
  animation-duration: var(--d-3);
  animation-timing-function: var(--e-out);
  animation-fill-mode: both;
  /* Cascata ate o 8o item: depois disso o conteudo so esperava para aparecer. */
  animation-delay: calc(min(var(--i, 0), 8) * 60ms);
}
[data-anim='rise'] {
  animation-name: pv-rise;
}
[data-anim='fade'] {
  animation-name: pv-fade;
}
[data-anim='pop'] {
  animation-name: pv-pop;
  animation-timing-function: var(--e-spring);
  animation-duration: var(--d-4);
}

[data-i='1'] { --i: 1; }
[data-i='2'] { --i: 2; }
[data-i='3'] { --i: 3; }
[data-i='4'] { --i: 4; }
[data-i='5'] { --i: 5; }
[data-i='6'] { --i: 6; }
[data-i='7'] { --i: 7; }
[data-i='8'] { --i: 8; }
[data-i='9'] { --i: 9; }
[data-i='10'] { --i: 10; }
[data-i='11'] { --i: 11; }
[data-i='12'] { --i: 12; }
[data-i='13'] { --i: 13; }
[data-i='14'] { --i: 14; }
[data-i='15'] { --i: 15; }
[data-i='16'] { --i: 16; }
[data-i='17'] { --i: 17; }
[data-i='18'] { --i: 18; }
[data-i='19'] { --i: 19; }
[data-i='20'] { --i: 20; }
[data-i='21'] { --i: 21; }
[data-i='22'] { --i: 22; }
[data-i='23'] { --i: 23; }
[data-i='24'] { --i: 24; }

/* Revelado ao rolar ate ele (IntersectionObserver em app.js). */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--d-4) var(--e-out),
    transform var(--d-4) var(--e-out);
  transition-delay: calc(var(--i, 0) * 50ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Transicao entre paginas (View Transitions, sem JS) ----------
   A barra de cima e a pilula da aba ativa tem nome: o navegador "transforma"
   uma na outra entre as paginas em vez de piscar. */
@view-transition {
  navigation: auto;
}

/* Entre paginas: so um crossfade curto. Subir 16px a cada aba somava com a
   cascata de cada tela e atrasava o conteudo principal. */
::view-transition-old(root) {
  animation: 90ms var(--e-out) both pv-fade reverse;
}
::view-transition-new(root) {
  animation: 150ms var(--e-out) both pv-fade;
}
::view-transition-group(pv-aba) {
  animation-duration: 420ms;
  animation-timing-function: var(--e-spring);
}
::view-transition-group(pv-topo) {
  animation: none;
}
/* Trocar o tema: so cor, sem deslocamento. */
html.vt-tema::view-transition-old(root),
html.vt-tema::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.vt-tema::view-transition-new(root) {
  animation: 200ms var(--e-out) both pv-fade;
}
html.vt-tema::view-transition-group(pv-topo),
html.vt-tema::view-transition-group(pv-aba) {
  animation: none;
}
/* Navegando entre abas, a tela nova nao refaz a cascata inteira. */
.vt-nav [data-anim] {
  animation: none;
}
/* O bloco principal (resumo do Hoje, formulario do login) nunca comeca invisivel. */
@keyframes pv-rise-solido {
  from { transform: translateY(12px); }
  to { transform: none; }
}
.resumo[data-anim],
.auth-form[data-anim] {
  animation-name: pv-rise-solido;
  animation-delay: 0ms;
}
@keyframes pv-pulso {
  50% { opacity: 0.45; }
}
@keyframes pv-bump-card {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.015); }
}
@keyframes pv-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes pv-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes pv-toast-out {
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* ==========================================================================
   Quem pediu menos movimento recebe menos movimento — regra, nao detalhe
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  /* View Transitions nao sao alcancadas por "*": desliga explicitamente. */
  @view-transition {
    navigation: none;
  }
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  /* Espera continua visivel (pulsa a opacidade, sem deslocamento). */
  .btn.is-loading::before,
  .option.is-loading::after {
    animation: pv-pulso 1.2s ease-in-out infinite !important;
  }
  .skeleton {
    animation: pv-pulso 1.6s ease-in-out infinite !important;
    background-position: 0 0;
  }
}