/* ============================================================
   App — tokens
   O sistema de design do app, no jeito da Apple (Human Interface
   Guidelines, 2026) e com os ativos que se podem usar no Android:
   Inter no lugar da SF Pro, Phosphor no lugar do SF Symbols.
   O porquê de cada valor está em docs/plano-design.md, secção 4.

   Duas camadas: a interface é neutra e segue o sistema (claro ou
   escuro, contraste, movimento, transparência); a marca entra no
   conteúdo, pela cor de destaque.

   Contraste medido (WCAG): todo texto ≥ 4,5:1 sobre --superficie, no
   claro e no escuro. Texto colorido pequeno vai sobre --superficie,
   não sobre --superficie-2.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin-opsz.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  /* ── cor: light-dark(claro, escuro) ────────────────────── */
  --fundo:            light-dark(#FFFFFF, #000000);
  --fundo-agrupado:   light-dark(#F2F2F7, #000000);
  --superficie:       light-dark(#FFFFFF, #1C1C1E);
  --superficie-2:     light-dark(#F2F2F7, #2C2C2E);
  --superficie-3:     light-dark(#E5E5EA, #3A3A3C);

  --texto:            light-dark(#000000, #FFFFFF);
  --texto-2:          light-dark(#636366, #98989F);   /* 6,0:1 · 5,9:1 */
  --texto-3:          light-dark(#AEAEB2, #636366);   /* só marcador e desativado */

  --separador:        light-dark(rgb(60 60 67 / .29), rgb(84 84 88 / .65));
  --separador-forte:  light-dark(#C6C6C8, #38383A);

  --preench-1:        light-dark(rgb(120 120 128 / .20), rgb(120 120 128 / .36));
  --preench-2:        light-dark(rgb(120 120 128 / .16), rgb(120 120 128 / .32));
  --preench-3:        light-dark(rgb(120 120 128 / .12), rgb(120 120 128 / .24));

  /* destaque: o par muda com a paleta (ver [data-accent] abaixo) */
  --destaque-claro: #C23F22;
  --destaque-escuro: #FF6A3D;
  --destaque:         light-dark(var(--destaque-claro), var(--destaque-escuro));
  --sobre-destaque:   light-dark(#FFFFFF, #000000);
  --destaque-suave:   color-mix(in srgb, var(--destaque) 14%, transparent);

  --sucesso:          light-dark(#1D7A3A, #30D158);
  --atencao:          light-dark(#B35000, #FF9230);
  --erro:             light-dark(#D70F2C, #FF5A5F);

  --proteina:         light-dark(#00758A, #00D2E0);
  --carbo:            light-dark(#946200, #FFD60A);
  --gordura:          light-dark(#A12CB2, #DB5CF2);
  --agua:             light-dark(#0072A0, #3CD3FE);
  --calorias:         var(--destaque);

  --veu:              light-dark(rgb(0 0 0 / .32), rgb(0 0 0 / .56));

  /* As cores de sistema, só para os ícones das linhas da Conta: cada
     assunto com a sua, como nos Ajustes do iOS. Laranja em todas não
     separava nada — e o laranja é do destaque, não de uma linha. */
  --sis-azul:         light-dark(#007AFF, #0A84FF);
  --sis-indigo:       light-dark(#5856D6, #5E5CE6);
  --sis-roxo:         light-dark(#AF52DE, #BF5AF2);
  --sis-rosa:         light-dark(#FF2D55, #FF375F);
  --sis-vermelho:     light-dark(#FF3B30, #FF453A);
  --sis-laranja:      light-dark(#FF9500, #FF9F0A);
  --sis-verde:        light-dark(#34C759, #30D158);
  --sis-azulado:      light-dark(#30B0C7, #40C8E0);
  --sis-cinza:        light-dark(#8E8E93, #8E8E93);

  /* ── materiais ────────────────────────────────────────── */
  --vidro:            light-dark(rgb(250 250 252 / .66), rgb(36 36 38 / .62));
  --vidro-borda:      light-dark(rgb(255 255 255 / .75), rgb(255 255 255 / .12));
  --vidro-desfoque:   blur(22px) saturate(180%);
  --sombra-1:         0 1px 2px rgb(0 0 0 / .05), 0 2px 10px rgb(0 0 0 / .05);
  --sombra-flutuante: 0 8px 30px light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .5)), 0 1px 3px rgb(0 0 0 / .08);

  /* ── tipografia ───────────────────────────────────────── */
  --fonte: -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Roboto, sans-serif;

  /* tamanho/entrelinha da escala da Apple, em rem para seguir a letra do sistema */
  --t-titulo-grande: 700 2.125rem/2.5625rem var(--fonte);   /* 34/41 */
  --t-titulo1:       700 1.75rem/2.125rem var(--fonte);     /* 28/34 */
  --t-titulo2:       700 1.375rem/1.75rem var(--fonte);     /* 22/28 */
  --t-titulo3:       600 1.25rem/1.5625rem var(--fonte);    /* 20/25 */
  --t-destaque:      600 1.0625rem/1.375rem var(--fonte);   /* 17/22 headline */
  --t-corpo:         400 1.0625rem/1.375rem var(--fonte);   /* 17/22 */
  --t-chamada:       400 1rem/1.3125rem var(--fonte);       /* 16/21 */
  --t-subtitulo:     400 0.9375rem/1.25rem var(--fonte);    /* 15/20 */
  --t-rodape:        400 0.8125rem/1.125rem var(--fonte);   /* 13/18 */
  --t-legenda1:      400 0.75rem/1rem var(--fonte);         /* 12/16 */
  --t-legenda2:      500 0.6875rem/0.8125rem var(--fonte);  /* 11/13 */
  --t-numero:        700 3.25rem/1 var(--fonte);            /* 52 */

  /* espaçamento da Inter por tamanho: −0,0223 + 0,185·e^(−0,1745·px) em */
  --k-titulo-grande: -0.0218em;
  --k-titulo1: -0.0209em;
  --k-titulo2: -0.0183em;
  --k-titulo3: -0.0167em;
  --k-corpo: -0.0128em;
  --k-chamada: -0.0110em;
  --k-subtitulo: -0.0088em;
  --k-rodape: -0.0032em;
  --k-legenda1: 0.0005em;
  --k-legenda2: 0.0048em;
  --k-numero: -0.0223em;

  /* ── espaço e forma ───────────────────────────────────── */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-7: 32px; --e-8: 44px;
  --margem: 16px;

  /* As bordas do aparelho (entalhe, barra de status, barra de gestos).
     No app instalado, o Capacitor escreve --safe-area-inset-* com os
     valores certos — o env() de um WebView antigo vinha a zero e o topo
     ficava por baixo da barra de status. No navegador, vale o env(). */
  --area-topo: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --area-baixo: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));

  --raio-pequeno: 8px;
  --raio-controle: 12px;
  --raio-cartao: 26px;
  --raio-sheet: 34px;
  --raio-capsula: 999px;

  --alvo: 44px;
  --altura-linha: 44px;
  --altura-linha-sub: 56px;
  --botao-grande: 50px;
  --botao-medio: 38px;
  --tabbar: 62px;

  /* ── movimento ────────────────────────────────────────── */
  --suave: cubic-bezier(.32, .72, 0, 1);
  /* mola com amortecimento 0,78: passa 2 % e assenta */
  --mola: linear(0, 0.064 4.2%, 0.206 8.3%, 0.374 12.5%, 0.537 16.7%, 0.679 20.8%, 0.792 25%, 0.877 29.2%,
    0.937 33.3%, 0.977 37.5%, 1.001 41.7%, 1.014 45.8%, 1.019 50%, 1.02 54.2%, 1.018 58.3%, 1.015 62.5%,
    1.011 66.7%, 1.008 70.8%, 1.006 75%, 1.004 79.2%, 1.002 83.3%, 1.001 87.5%, 1);
  --rapido: 150ms;
  --medio: 320ms;
  --lento: 500ms;
}

@media (min-width: 400px) {
  :root { --margem: 20px; }
}

/* A pessoa não escolhe o tema: segue o sistema (HIG). Isto força um
   dos dois só onde é preciso ver os dois — o catálogo e os testes. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ── paleta de destaque: cinco cores, todas ≥ 4,5:1 ───────── */
[data-accent="azul"]   { --destaque-claro: #0A60D0; --destaque-escuro: #4A9EFF; }
[data-accent="verde"]  { --destaque-claro: #1D7A3A; --destaque-escuro: #30D158; }
[data-accent="indigo"] { --destaque-claro: #4A45C4; --destaque-escuro: #8581FF; }
[data-accent="rosa"]   { --destaque-claro: #C4204E; --destaque-escuro: #FF6488; }
/* os nomes da paleta antiga, na cor mais próxima da nova */
[data-accent="cobalto"], [data-accent="petroleo"] { --destaque-claro: #0A60D0; --destaque-escuro: #4A9EFF; }
[data-accent="oliva"]  { --destaque-claro: #1D7A3A; --destaque-escuro: #30D158; }
[data-accent="vinho"]  { --destaque-claro: #C4204E; --destaque-escuro: #FF6488; }
[data-accent="tinta"]  { --destaque-claro: #4A45C4; --destaque-escuro: #8581FF; }

/* ── acessibilidade ───────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --texto-2: var(--texto);
    --separador: var(--separador-forte);
    --preench-1: light-dark(rgb(120 120 128 / .32), rgb(120 120 128 / .5));
    --vidro: var(--superficie);
  }
}
:root[data-contraste="mais"] {
  --texto-2: var(--texto);
  --separador: var(--separador-forte);
  --preench-1: light-dark(rgb(120 120 128 / .32), rgb(120 120 128 / .5));
  --vidro: var(--superficie);
}

@media (prefers-reduced-transparency: reduce) {
  :root { --vidro: var(--superficie); --vidro-desfoque: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --mola: ease-out; --suave: ease-out; --medio: 150ms; --lento: 150ms; }
}

/* Sem light-dark() (WebView anterior a 2024): fica o claro. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light;
    --fundo: #FFFFFF; --fundo-agrupado: #F2F2F7; --superficie: #FFFFFF; --superficie-2: #F2F2F7; --superficie-3: #E5E5EA;
    --texto: #000000; --texto-2: #636366; --texto-3: #AEAEB2;
    --separador: rgb(60 60 67 / .29); --separador-forte: #C6C6C8;
    --preench-1: rgb(120 120 128 / .20); --preench-2: rgb(120 120 128 / .16); --preench-3: rgb(120 120 128 / .12);
    --destaque: var(--destaque-claro); --sobre-destaque: #FFFFFF;
    --sucesso: #1D7A3A; --atencao: #B35000; --erro: #D70F2C;
    --proteina: #00758A; --carbo: #946200; --gordura: #A12CB2; --agua: #0072A0;
    --veu: rgb(0 0 0 / .32); --vidro: rgb(250 250 252 / .9); --vidro-borda: rgb(255 255 255 / .75);
    --sombra-flutuante: 0 8px 30px rgb(0 0 0 / .14), 0 1px 3px rgb(0 0 0 / .08);
  }
}

/* ============================================================
   Ponte: os nomes antigos apontam para os novos.
   As telas de hoje (components.css, chat.css, onboarding.css) ganham
   o visual novo sem ser reescritas agora; cada uma troca para os nomes
   novos quando for refeita (etapas 3 e 4), e esta secção sai no fim.
   ============================================================ */
:root {
  --font-display: var(--fonte);
  --font-body: var(--fonte);
  --font-num: var(--fonte);

  --fs-micro: 0.6875rem;
  --fs-small: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-lead: 1.0625rem;
  --fs-h3: 1.25rem;
  --fs-h2: 1.75rem;
  --fs-huge: 3.25rem;
  --track-caps: 0.02em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px;

  --r-1: var(--raio-pequeno);
  --r-2: var(--raio-controle);
  --r-3: 18px;
  --r-4: var(--raio-sheet);
  --r-pill: var(--raio-capsula);

  --gutter: var(--margem);
  --row-gap: 14px;
  --block-pad: 16px;

  --lift-1: var(--sombra-1);
  --lift-2: var(--sombra-flutuante);
  --ease: var(--suave);
  --dur: 180ms;

  --bg: var(--fundo-agrupado);
  --bg-tint: var(--superficie-2);
  --surface: var(--superficie);
  --surface-2: var(--superficie-2);
  --ink: var(--texto);
  --ink-2: var(--texto-2);
  --ink-3: var(--texto-2);
  --line: var(--separador);
  --line-2: var(--separador-forte);
  --accent: var(--destaque);
  --accent-ink: var(--sobre-destaque);
  --accent-soft: var(--destaque-suave);
  --ok: var(--sucesso);
  --warn: var(--atencao);
  --danger: var(--erro);
  --shade: var(--veu);

  --c-prot: var(--proteina);
  --c-carb: var(--carbo);
  --c-fat: var(--gordura);
  --c-water: var(--agua);
}