/* ==========================================================================
   cdc-design-system.css — Design System do Comidinhas do Chef · v2.0
   --------------------------------------------------------------------------
   Camada FUNDAÇÃO. Carrega antes de mobile-app.css e mobile-cro.css.

   Todos os tokens foram DERIVADOS do tema atual — nada foi inventado. As cores
   são as que já estão em style.css; as fontes são as que o tema já carrega em
   fonts.css (Baloo 2 para display, Inter para texto). O que o design system faz
   é dar nome a elas, organizar a escala e transformar padrões repetidos em
   componentes reutilizáveis.

   Prefixo único: `cdc-`. Nada aqui colide com classe existente do tema.

   Índice
   ------
   00. Fundação — cor, tipo, espaço, forma, elevação, movimento, camadas
   01. Base e utilitários
   02. Botões
   03. Chips e etiquetas
   04. Campos de formulário
   05. Cartões
   06. Listas e linhas
   07. Progresso, medidores e skeleton
   08. Feedback — toast, alerta, banner
   09. Superfícies — folha, modal, popover
   10. Blocos de anúncio
   11. Componentes de painel (dashboard)
   ========================================================================== */

/* ==========================================================================
   00. FUNDAÇÃO
   ========================================================================== */

:root {

  /* ==========================================================================
     COR — 3 famílias + semântica + tintas.
     A auditoria do tema encontrou 52 cores hexadecimais e 46 rgba distintos:
     8 vermelhos fazendo o mesmo trabalho, 20 cinzas, 2 azuis herdados do
     header do R7 que não pertencem a paleta nenhuma. Cada valor legado está
     mapeado abaixo, no comentário do token que passou a representá-lo.
     ========================================================================== */

  /* --- Vermelho: DOIS papéis, dois valores ------------------------------ */
  /*
   * A auditoria encontrou OITO vermelhos operacionais fazendo o trabalho de
   * dois. Três pares eram, na prática, a mesma cor — a distância RGB entre
   * #5B1311 e #5E1914 é 7, entre #881813 e #961C1C é 17, entre #C21719 e
   * #CC2222 é 17. Ninguém distingue isso numa tela.
   *
   * A consolidação segue o papel, não o tom:
   *
   *   TINTA (#5B1311) — título, ícone, link, metadado. Tudo que é LIDO.
   *   AÇÃO (#C21719)  — fundo de botão, chip ativo, badge. Tudo que é TOCADO.
   *
   * Contraste medido sobre o fundo do site (#FBFBFB):
   *
   *   #C21719   5,92:1   passa AA, REPROVA AAA (mínimo 7:1)
   *   #5B1311  13,13:1   passa AAA com folga
   *
   * Por isso o título passa a ser a tinta escura: em texto grande a diferença
   * é estética, mas o mesmo vermelho aparece em subtítulo, link e metadado de
   * 12–14px, e aí 5,92:1 é o teto do aceitável. Com 13:1 o texto continua
   * legível em tela de celular sob luz do dia, que é onde metade das sessões
   * acontece.
   *
   * O vermelho vivo não sai: ele passa a ser exclusivamente FUNDO de ação —
   * com texto branco em cima dá 6,12:1, e é o que faz o botão parecer botão.
   */
  --cdc-red-ink:    #5B1311;   /* absorve #881813, #961C1C, #AC3221, #5E1914 */
  --cdc-red-action: #C21719;   /* absorve #E3171D, #CC2222, #A21315 */

  /* Superfícies tênues e o degrau de pressionado. */
  --cdc-red-50:   #FDF2F2;
  --cdc-red-100:  #F9DEDE;
  --cdc-red-200:  #E5A0A1;
  --cdc-red-950:  #3E100D;   /* estado pressionado sobre superfície de tinta */

  /* Apelidos de compatibilidade.
     A rampa numérica antiga continua resolvendo — é o que permite consolidar
     sem reescrever as 291 referências já tokenizadas no CSS do tema. */
  --cdc-red-300: var(--cdc-red-action);
  --cdc-red-500: var(--cdc-red-action);
  --cdc-red-700: var(--cdc-red-ink);
  --cdc-red-900: var(--cdc-red-ink);

  /* --- Âmbar: o que é comestível ---------------------------------------- */
  --cdc-amber-50:  #FEF8EC;
  --cdc-amber-100: #FAE8C6;
  --cdc-amber-400: #FFAD50;
  --cdc-amber-500: #F7AC1D;  /* ACENTO */
  --cdc-amber-600: #D69D28;
  --cdc-amber-700: #EC6C19;  /* ingrediente marcado */

  /* --- Neutros ----------------------------------------------------------- */
  --cdc-gray-0:    #FFFFFF;
  --cdc-gray-25:   #FBFBFB;  /* fundo · absorve #FAFAFA, #F9F9F9, #F9F7F6 */
  --cdc-gray-50:   #F5F5F5;  /* superfície rebaixada · absorve #F0F0F0 */
  --cdc-gray-100:  #EFEFEF;  /* borda de campo · absorve #EEEEEE */
  --cdc-gray-200:  #E5E5E5;  /* linha · absorve #E1E1E1, #E0E0E0 */
  --cdc-gray-300:  #D6D6D6;  /* absorve #DDDDDD, #DDDBDD, #D3D0D0 */
  --cdc-gray-400:  #B4B4B4;  /* absorve #CCCCCC, #AAAAAA */
  --cdc-gray-500:  #858585;  /* absorve #888888, #878787, #828282 */
  --cdc-gray-600:  #5F5F5F;  /* texto de apoio — o tom mais claro que passa em
                                AA sobre branco. Substitui rgba(73,73,73,.64),
                                que dá ~3,2:1 e reprova. Absorve #666, #555 */
  --cdc-gray-700:  #494949;  /* texto corrente · absorve #444444, #534847 */
  --cdc-gray-900:  #333333;
  --cdc-gray-1000: #000000;

  /* --- Semântica --------------------------------------------------------- */
  /* Cada estado precisa do par tinta + superfície. Sem a superfície, o aviso
     acaba com um azul-claro inventado na hora — foi o que aconteceu com
     #E8F1FA e #F1F7FC, dois tons diferentes para o mesmo papel. */
  --cdc-success:    #0F7334;
  --cdc-success-50: #F0F8F3;
  --cdc-warning:    #B26A00;
  --cdc-warning-50: #FDF6E9;
  --cdc-danger:     #B3261E;
  --cdc-danger-50:  #FDF2F2;
  --cdc-info:       #0B5FA5;
  --cdc-info-50:    #EEF5FC;

  /* --- Herança marcada para extinção ------------------------------------- */
  /* Azul do header legado do R7 e do admin do WordPress. Não pertence à
     paleta. Cada uso restante deve migrar para --cdc-red-700. */
  --cdc-legacy-blue: #0071BD;

  /* --- Marcas de terceiros ----------------------------------------------- */
  /* NÃO padronizar: mudar a cor da marca alheia no botão de login quebra o
     reconhecimento e, em alguns casos, os termos de uso da plataforma. */
  --cdc-vendor-facebook:  #1877F2;
  --cdc-vendor-google:    #EA4335;
  --cdc-vendor-apple:     #1D1D1F;
  --cdc-vendor-linkedin:  #0077B5;
  --cdc-vendor-whatsapp:  #075E54;

  /* --- Tintas: cor da paleta com opacidade -------------------------------- */
  /* Os 46 rgba do tema são, quase todos, uma cor da paleta com alfa. Nomeados
     para deixarem de ser números soltos que ninguém sabe de onde vieram. */
  --cdc-tint-action-06:     rgba(194, 23, 25, .06);   /* realce de toque */
  --cdc-tint-action-08:     rgba(194, 23, 25, .08);
  --cdc-tint-line-28:       rgba(229, 229, 229, .28);
  --cdc-tint-line-50:       rgba(229, 229, 229, .50);
  --cdc-tint-brand-dark-08: rgba(136, 24, 19, .08);
  --cdc-tint-brand-dark-16: rgba(136, 24, 19, .16);
  --cdc-tint-brand-dark-25: rgba(136, 24, 19, .25);
  --cdc-tint-accent-08:     rgba(247, 172, 29, .08);
  --cdc-tint-accent-16:     rgba(247, 172, 29, .16);
  --cdc-tint-accent-24:     rgba(247, 172, 29, .24);
  --cdc-tint-accent-32:     rgba(247, 172, 29, .32);
  --cdc-tint-line-16:       rgba(229, 229, 229, .16);
  --cdc-tint-line-24:       rgba(229, 229, 229, .24);
  --cdc-tint-line-48:       rgba(229, 229, 229, .48);
  --cdc-tint-line-64:       rgba(229, 229, 229, .64);
  --cdc-tint-line-72:       rgba(229, 229, 229, .72);
  --cdc-tint-ink-24:        rgba(73, 73, 73, .24);
  --cdc-tint-ink-88:        rgba(73, 73, 73, .88);
  /* Escala de tinta sobre superfície escura (rodapé, toast, overlay).
     Seis degraus cobrem todos os papéis: separador, borda, ícone secundário,
     texto secundário, texto principal e realce. */
  --cdc-tint-on-dark-12:    rgba(255, 255, 255, .12);   /* separador */
  --cdc-tint-on-dark-24:    rgba(255, 255, 255, .24);   /* borda */
  --cdc-tint-on-dark-32:    rgba(255, 255, 255, .32);   /* ícone secundário */
  --cdc-tint-on-dark-62:    rgba(255, 255, 255, .62);   /* texto de apoio */
  --cdc-tint-on-dark-82:    rgba(255, 255, 255, .82);   /* texto corrente */
  --cdc-tint-on-dark-56:    rgba(255, 255, 255, .56);
  --cdc-tint-on-dark-85:    rgba(255, 255, 255, .85);

  /* --- Superfícies especiais --------------------------------------------- */
  /* Barra fixa translúcida: 97–98% de branco em vez de 100% deixa entrever o
     movimento do conteúdo por baixo, o que ajuda a entender que a barra está
     sobreposta e não é o fim da página. */
  --cdc-surface-veil:    rgba(255, 255, 255, .97);
  /* Superfície invertida: toast, tooltip. */
  --cdc-surface-inverse: rgba(27, 27, 27, .94);
  /* Borda de controle não preenchido (caixa de seleção). Cinza sólido não
     funciona aqui: sobre superfícies diferentes ele muda de peso; o preto com
     alfa acompanha o fundo. */
  --cdc-border-control:  rgba(0, 0, 0, .54);
  /* Brilho do esqueleto de carregamento. */
  --cdc-shimmer: linear-gradient(90deg,
                   transparent 0,
                   rgba(255, 255, 255, .35) 40%,
                   rgba(255, 255, 255, .60) 60%,
                   transparent 100%);

  /* --- Véus (fundo de modal, gradiente sobre foto) ------------------------ */
  --cdc-scrim-soft:   rgba(0, 0, 0, .12);
  --cdc-scrim-hairline: rgba(0, 0, 0, .18);
  --cdc-scrim-medium: rgba(0, 0, 0, .24);
  --cdc-scrim-modal:  rgba(0, 0, 0, .50);
  --cdc-scrim-strong: rgba(0, 0, 0, .65);

  /* --- Papéis ------------------------------------------------------------ */
  /* A camada que os componentes consomem. Trocar o tema inteiro é trocar estas
     doze linhas — nenhum componente referencia a rampa diretamente. */
  --cdc-bg:            var(--cdc-gray-25);
  --cdc-surface:       var(--cdc-gray-0);
  --cdc-surface-sunk:  var(--cdc-gray-50);
  --cdc-border:        var(--cdc-gray-200);
  --cdc-border-strong: var(--cdc-gray-400);

  --cdc-text:          var(--cdc-gray-700);
  --cdc-text-strong:   var(--cdc-gray-900);
  --cdc-text-muted:    var(--cdc-gray-600);
  --cdc-text-on-brand: var(--cdc-gray-0);

  /* TINTA — tudo que é lido em vermelho: título, ícone, link, metadado. */
  --cdc-text-brand:    var(--cdc-red-ink);
  --cdc-brand-dark:    var(--cdc-red-ink);
  --cdc-brand-deep:    var(--cdc-red-ink);

  /* AÇÃO — tudo que é tocado: fundo de botão, chip ativo, badge. */
  --cdc-brand:         var(--cdc-red-action);
  --cdc-brand-hover:   var(--cdc-red-ink);

  --cdc-accent:        var(--cdc-amber-500);

  /* Anel de foco na tinta: 13:1 contra o fundo, visível sobre qualquer
     superfície clara da página. */
  --cdc-focus:         var(--cdc-red-ink);
  --cdc-focus-invert:  var(--cdc-gray-0);
  /* Halo usado quando o anel branco cai sobre superfície clara: separa o anel
     do fundo sem depender da cor de trás. */
  --cdc-focus-halo:    0 0 0 6px rgba(0, 0, 0, .45);

  /* Superfície escura (rodapé). */
  --cdc-footer-bg:     var(--cdc-red-ink);
  --cdc-footer-ink:    rgba(255, 255, 255, .82);

  /* ==========================================================================
     TIPOGRAFIA — 32 tamanhos avulsos (px, rem e em misturados) viram 9 degraus.
     ========================================================================== */

  --cdc-font-display: "Baloo 2", system-ui, sans-serif;
  --cdc-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cdc-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala fluida: cada degrau interpola entre 360px e 1280px de viewport.
     Resolve de uma vez os pares "48px no desktop / 24px no celular". */
  /* 10px existe para um papel só: rótulo legal e microlegenda — "Publicidade",
     unidade em tabela. Fora disso, o piso é 11px. */
  --cdc-text-3xs: 0.625rem;                                   /* 10px */
  --cdc-text-2xs: 0.6875rem;                                  /* 11px */
  --cdc-text-xs:  0.75rem;                                    /* 12px */
  --cdc-text-sm:  0.875rem;                                   /* 14px */
  --cdc-text-md:  1rem;                                       /* 16px — piso do iOS */
  --cdc-text-lg:  clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);   /* 17→18 */
  --cdc-text-xl:  clamp(1.125rem, 1rem + 0.6vw, 1.375rem);    /* 18→22 */
  --cdc-text-2xl: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);      /* 20→28 */
  --cdc-text-3xl: clamp(1.5rem, 1rem + 2.2vw, 2.25rem);       /* 24→36 */
  /* Teto baixado de 48 para 40px. Baloo 2 tem altura-x alta e contra-formas
     largas: 48px dela ocupa o espaço óptico de uns 56px de uma grotesca comum.
     Num título de receita, que quase sempre passa de uma linha, isso come a
     primeira dobra inteira e empurra foto, tabela e o primeiro anúncio para
     fora da tela. */
  --cdc-text-4xl: clamp(1.75rem, 1rem + 2.6vw, 2.5rem);       /* 28→40 */

  /* Display de duas linhas com 1,0 faz as linhas encostarem — o ascendente da
     segunda toca o descendente da primeira. 1,08 abre o suficiente sem soltar. */
  --cdc-leading-display: 1.08;
  --cdc-leading-tight: 1.2;
  --cdc-leading-snug:  1.35;
  --cdc-leading-body:  1.65;
  --cdc-leading-loose: 1.8;

  --cdc-weight-regular: 400;
  --cdc-weight-medium:  600;
  --cdc-weight-bold:    700;

  /* Tipo grande precisa de tracking negativo: o espaçamento desenhado para
     corpo de texto fica largo demais quando escalado para 40px. */
  --cdc-tracking-display: -0.02em;
  --cdc-tracking-tight: -0.015em;
  --cdc-tracking-caps:  0.06em;

  /* ==========================================================================
     ESPAÇO — grade de 4pt. O tema usa 30 valores sem grade nenhuma
     (2, 5, 6, 7, 10, 13, 15, 17, 19, 21, 23, 25, 30, 35, 44, 50, 56, 60, 100…).
     ========================================================================== */

  --cdc-space-05: 2px;
  --cdc-space-1:  4px;
  --cdc-space-2:  8px;
  --cdc-space-3:  12px;
  --cdc-space-4:  16px;
  --cdc-space-5:  20px;
  --cdc-space-6:  24px;
  --cdc-space-8:  32px;
  --cdc-space-10: 40px;
  --cdc-space-12: 48px;
  --cdc-space-16: 64px;
  --cdc-space-20: 80px;

  /* ==========================================================================
     FORMA — 28 raios viram 9. A pílula é a assinatura do tema.
     ========================================================================== */

  --cdc-radius-2xs:    2px;
  --cdc-radius-xs:     4px;    /* absorve 5px */
  --cdc-radius-sm:     8px;    /* absorve 10px */
  --cdc-radius-md:     12px;
  --cdc-radius-lg:     16px;
  --cdc-radius-xl:     24px;
  --cdc-radius-2xl:    32px;   /* absorve 30px */
  --cdc-radius-pill:   999px;  /* absorve 40, 48, 50, 66px */
  --cdc-radius-circle: 50%;    /* absorve 100% */

  /* ==========================================================================
     ELEVAÇÃO — 24 sombras viram 7 + 2 filetes.
     A sombra do tema é CINZA (#E5E5E5), não preta transparente: ela dissolve
     no fundo claro em vez de escurecer. Característica preservada de propósito.
     ========================================================================== */

  --cdc-elev-0: none;
  --cdc-elev-1: 0 0 4px var(--cdc-gray-200);
  --cdc-elev-2: 0 2px 8px rgba(229, 229, 229, .9), 0 0 4px var(--cdc-gray-200);
  --cdc-elev-3: 0 8px 24px var(--cdc-tint-line-72), 0 0 4px var(--cdc-gray-200);
  --cdc-elev-4: 0 4px 16px rgba(0, 0, 0, .12);
  --cdc-elev-5: 0 15px 30px rgba(0, 0, 0, .10);
  --cdc-elev-up: 0 -2px 14px rgba(0, 0, 0, .10);
  --cdc-elev-hairline-bottom: 0 1px 0 var(--cdc-gray-200);
  --cdc-elev-hairline-top:    0 -1px 0 var(--cdc-gray-200);

  /* ==========================================================================
     MOVIMENTO
     ========================================================================== */

  --cdc-dur-fast: 120ms;
  --cdc-dur-base: 220ms;
  --cdc-dur-slow: 320ms;
  --cdc-ease:     cubic-bezier(.2, .7, .3, 1);
  --cdc-ease-in:  cubic-bezier(.4, 0, 1, 1);
  --cdc-ease-out: cubic-bezier(0, 0, .2, 1);

  /* ==========================================================================
     DIMENSÕES
     ========================================================================== */

  --cdc-tap:       48px;   /* alvo de toque */
  --cdc-tap-min:   44px;
  --cdc-container: 1127px;
  --cdc-measure:   68ch;   /* medida de leitura */

  /* --- Ícones -----------------------------------------------------------
     Quatro degraus. A auditoria encontrou 92 SVG inline nos templates em ~20
     combinações de tamanho e viewBox — inclusive `width="2"`, `width` sem
     `height` (que deforma) e viewBox não-quadrado como 20×18 e 25×24.

     A escala é aplicada pela ALTURA, nunca pela caixa: `block-size` fixo com
     `inline-size: auto` deixa todo ícone com a mesma altura óptica — que é o
     que o olho lê como alinhamento — sem esticar os que não são quadrados. */
  --cdc-icon-xs: 16px;
  --cdc-icon-sm: 20px;
  --cdc-icon-md: 24px;
  --cdc-icon-lg: 32px;

  /* --- Alturas de controle ----------------------------------------------
     Quatro degraus para tudo que se clica. Antes havia 32, 34, 40, 44, 48 e
     50px convivendo, o que faz botão e campo vizinhos nunca alinharem. */
  --cdc-control-xs: 32px;   /* botão dentro de outro controle (± porções) */
  --cdc-control-sm: 40px;   /* chip, botão compacto */
  --cdc-control-md: 48px;   /* padrão — igual ao alvo de toque */
  --cdc-control-lg: 56px;   /* ação principal de página */

  /* --- Miniaturas --------------------------------------------------------
     Larguras de imagem em cartão horizontal. Antes: 48, 96, 104 e 140px. */
  --cdc-thumb-sm: 64px;
  --cdc-thumb-md: 96px;
  --cdc-thumb-lg: 140px;

  /* --- Ritmo vertical ----------------------------------------------------
     Distância entre blocos de conteúdo. Sem uma escala própria, o espaço
     entre seções vira o mesmo do espaço interno dos componentes e a página
     perde a leitura de "onde termina um assunto e começa o outro". */
  --cdc-rhythm-sm: var(--cdc-space-6);    /* 24 — entre itens de uma lista */
  --cdc-rhythm-md: var(--cdc-space-10);   /* 40 — entre blocos de uma seção */
  --cdc-rhythm-lg: var(--cdc-space-16);   /* 64 — entre seções da página */

  /* ==========================================================================
     PONTOS DE QUEBRA — declarados como token para documentação e para uso em
     container queries. Media query não aceita var(), então os valores também
     estão escritos por extenso em cdc-layout.css, e o linter compara os dois.
     9 pontos (520, 620, 767, 768, 769, 992, 1023, 1024, 1200) viram 3.
     ========================================================================== */

  --cdc-bp-sm: 600px;    /* listas em 2 colunas */
  --cdc-bp-lg: 1024px;   /* entra a barra lateral — MESMO ponto de .only-desktop */
  --cdc-bp-xl: 1280px;   /* respiro máximo do container */

  /* ==========================================================================
     CAMADAS
     ========================================================================== */

  --cdc-z-base:    1;
  --cdc-z-sticky:  100;
  --cdc-z-tabbar:  999990;
  --cdc-z-anchor:  999991;
  --cdc-z-sheet:   999995;
  --cdc-z-toast:   999997;

  /* ==========================================================================
     ÁREA SEGURA E MEDIDAS DO SHELL (escritas em runtime pelo mobile-app.js)
     ========================================================================== */

  --cdc-safe-t: env(safe-area-inset-top, 0px);
  --cdc-safe-b: env(safe-area-inset-bottom, 0px);
  --cdc-safe-l: env(safe-area-inset-left, 0px);
  --cdc-safe-r: env(safe-area-inset-right, 0px);

  --cdc-tabbar-h: 56px;
  --cdc-anchor-h: 0px;
  --cdc-header-h: 56px;
}

/* ==========================================================================
   01. BASE E UTILITÁRIOS
   ========================================================================== */

.cdc-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Anel de foco padrão do sistema. Existe como classe utilitária para poder ser
   aplicado a componentes futuros sem repetir a declaração. */
.cdc-focusable:focus-visible,
.cdc-btn:focus-visible,
.cdc-chip:focus-visible,
.cdc-field:focus-visible,
.cdc-row:focus-visible {
  outline: 3px solid var(--cdc-focus);
  outline-offset: 2px;
  border-radius: var(--cdc-radius-xs);
}

/* Sobre superfície de marca o anel vermelho desaparece: inverte. */
.cdc-btn--primary:focus-visible,
.cdc-btn--danger:focus-visible,
.cdc-on-brand :focus-visible {
  outline-color: var(--cdc-focus-invert);
  box-shadow: var(--cdc-focus-halo);
}

.cdc-stack   { display: flex; flex-direction: column; gap: var(--cdc-space-4); }
.cdc-stack-2 { display: flex; flex-direction: column; gap: var(--cdc-space-2); }
.cdc-row-h   { display: flex; align-items: center; gap: var(--cdc-space-2); }
.cdc-spread  { display: flex; align-items: center; justify-content: space-between; gap: var(--cdc-space-3); }

.cdc-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cdc-clamp-2,
.cdc-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cdc-clamp-2 { -webkit-line-clamp: 2; }
.cdc-clamp-3 { -webkit-line-clamp: 3; }

/* Tipografia aplicada */
.cdc-display    { font-family: var(--cdc-font-display); font-weight: var(--cdc-weight-bold); line-height: var(--cdc-leading-tight); color: var(--cdc-text-brand); }
.cdc-display-lg { font-size: var(--cdc-text-4xl); }
.cdc-display-md { font-size: var(--cdc-text-3xl); }
.cdc-display-sm { font-size: var(--cdc-text-2xl); }

.cdc-title  { font-family: var(--cdc-font-body); font-size: var(--cdc-text-xl); font-weight: var(--cdc-weight-bold); line-height: var(--cdc-leading-snug); color: var(--cdc-brand-dark); }
.cdc-body   { font-size: var(--cdc-text-lg); line-height: var(--cdc-leading-body); color: var(--cdc-text); }
.cdc-meta   { font-size: var(--cdc-text-sm); color: var(--cdc-text-muted); }
.cdc-eyebrow {
  font-size: var(--cdc-text-2xs);
  font-weight: var(--cdc-weight-bold);
  letter-spacing: var(--cdc-tracking-caps);
  text-transform: uppercase;
  color: var(--cdc-text-muted);
}

/* ==========================================================================
   02. BOTÕES
   --------------------------------------------------------------------------
   Um único componente com variantes, no lugar dos ~9 estilos de botão
   diferentes espalhados hoje entre .btn-cta, .share button, .caption button,
   .form-actions button, .read-more e o botão de comentário.
   ========================================================================== */

.cdc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cdc-space-2);
  min-height: var(--cdc-tap);
  padding: 0 var(--cdc-space-6);
  border: 1px solid transparent;
  border-radius: var(--cdc-radius-pill);
  font-family: var(--cdc-font-body);
  font-size: var(--cdc-text-md);
  font-weight: var(--cdc-weight-bold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--cdc-dur-fast) var(--cdc-ease),
              color var(--cdc-dur-fast) var(--cdc-ease),
              border-color var(--cdc-dur-fast) var(--cdc-ease),
              transform var(--cdc-dur-fast) var(--cdc-ease);
  -webkit-tap-highlight-color: transparent;
}

.cdc-btn:active { transform: scale(.97); }

.cdc-btn[disabled],
.cdc-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.cdc-btn svg { block-size: var(--cdc-icon-sm); inline-size: var(--cdc-icon-sm); fill: currentColor; flex: 0 0 auto; }

.cdc-btn--primary {
  background: var(--cdc-brand);
  color: var(--cdc-text-on-brand);
}
.cdc-btn--primary:hover { background: var(--cdc-brand-hover); }

.cdc-btn--secondary {
  background: var(--cdc-surface);
  border-color: var(--cdc-text-brand);
  color: var(--cdc-text-brand);
}
.cdc-btn--secondary:hover { background: var(--cdc-red-50); }

.cdc-btn--ghost {
  background: transparent;
  border-color: var(--cdc-border);
  color: var(--cdc-text-muted);
}
.cdc-btn--ghost:hover { background: var(--cdc-gray-50); }

.cdc-btn--accent {
  background: var(--cdc-accent);
  color: var(--cdc-brand-deep);
}

.cdc-btn--danger {
  background: var(--cdc-danger);
  color: var(--cdc-gray-0);
}

.cdc-btn--sm { min-height: var(--cdc-control-sm); padding: 0 var(--cdc-space-4); font-size: var(--cdc-text-sm); }
.cdc-btn--lg { min-height: var(--cdc-control-lg); padding: 0 var(--cdc-space-8); font-size: var(--cdc-text-lg); }
.cdc-btn--block { display: flex; width: 100%; }

/* Botão só de ícone — mantém alvo de 48px mesmo com desenho menor. */
.cdc-btn--icon {
  width: var(--cdc-tap);
  min-width: var(--cdc-tap);
  padding: 0;
  border-radius: var(--cdc-radius-circle);
}

/* Estado "já feito" (salvo, curtido): precisa ser distinguível sem depender de
   cor sozinha — por isso muda também o preenchimento do ícone e o rótulo. */
.cdc-btn.is-done {
  background: var(--cdc-red-50);
  border-color: var(--cdc-text-brand);
  color: var(--cdc-text-brand);
}

/* ==========================================================================
   03. CHIPS E ETIQUETAS
   ========================================================================== */

.cdc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cdc-space-1);
  min-height: var(--cdc-control-sm);
  padding: 0 var(--cdc-space-4);
  border: 1px solid var(--cdc-border);
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-surface);
  color: var(--cdc-brand-dark);
  font-size: var(--cdc-text-sm);
  text-decoration: none;
  white-space: nowrap;
}
.cdc-chip:active  { background: var(--cdc-amber-50); }
.cdc-chip.is-on   { background: var(--cdc-brand); border-color: var(--cdc-brand); color: var(--cdc-text-on-brand); }

.cdc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cdc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cdc-chips li { list-style: none; margin: 0; }

.cdc-chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--cdc-space-2);
  scrollbar-width: none;
}
.cdc-chips--scroll::-webkit-scrollbar { display: none; }
.cdc-chips--scroll > li { scroll-snap-align: start; }

.cdc-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--cdc-space-05) var(--cdc-space-2);
  border-radius: var(--cdc-radius-xs);
  background: var(--cdc-amber-50);
  color: var(--cdc-brand-deep);
  font-size: var(--cdc-text-2xs);
  font-weight: var(--cdc-weight-bold);
  letter-spacing: var(--cdc-tracking-caps);
  text-transform: uppercase;
}
.cdc-tag--new  { background: var(--cdc-red-50); color: var(--cdc-brand); }
.cdc-tag--info { background: var(--cdc-info-50); color: var(--cdc-info); }

.cdc-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 var(--cdc-space-1);
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-brand);
  color: var(--cdc-text-on-brand);
  font-size: var(--cdc-text-3xs);
  font-weight: var(--cdc-weight-bold);
  line-height: 18px;
  text-align: center;
}

/* ==========================================================================
   04. CAMPOS
   ========================================================================== */

.cdc-field {
  display: block;
  width: 100%;
  min-height: var(--cdc-tap);
  padding: var(--cdc-space-3) var(--cdc-space-4);
  border: 1px solid var(--cdc-gray-100);
  border-radius: var(--cdc-radius-sm);
  background: var(--cdc-surface);
  color: var(--cdc-text);
  font-family: var(--cdc-font-body);
  font-size: var(--cdc-text-md);   /* nunca abaixo de 16px: iOS dá zoom */
  box-sizing: border-box;
  appearance: none;
}
.cdc-field::placeholder { color: var(--cdc-text-muted); }
.cdc-field:focus { border-color: var(--cdc-focus); }

.cdc-field--pill { border-radius: var(--cdc-radius-pill); }
.cdc-field--area { min-height: 120px; resize: vertical; }

.cdc-label {
  display: block;
  margin-bottom: var(--cdc-space-1);
  font-size: var(--cdc-text-sm);
  font-weight: var(--cdc-weight-medium);
  color: var(--cdc-text);
}

.cdc-hint  { font-size: var(--cdc-text-xs); color: var(--cdc-text-muted); }
.cdc-error { font-size: var(--cdc-text-xs); color: var(--cdc-danger); font-weight: var(--cdc-weight-medium); }

.cdc-field[aria-invalid="true"] { border-color: var(--cdc-danger); }

/* Caixa de seleção acessível: invisível aos olhos, presente para teclado e
   leitor de tela. É o padrão que substitui `display:none` no ingrediente. */
.cdc-check { position: relative; display: flex; align-items: flex-start; gap: var(--cdc-space-2); min-height: var(--cdc-tap); cursor: pointer; }
.cdc-check input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.cdc-check-box {
  flex: 0 0 auto;
  block-size: var(--cdc-icon-sm); inline-size: var(--cdc-icon-sm);
  margin-top: 2px;
  border: 2px solid var(--cdc-border-control);
  border-radius: var(--cdc-radius-xs);
  background: var(--cdc-surface);
  transition: background var(--cdc-dur-fast), border-color var(--cdc-dur-fast);
}
.cdc-check input:checked + .cdc-check-box {
  background: var(--cdc-amber-700);
  border-color: var(--cdc-amber-700);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.699 6.285a1 1 0 0 1 .016 1.414l-9.765 10a1 1 0 0 1-1.479-.053l-4.234-5a1 1 0 0 1 1.526-1.292l3.524 4.16 8.998-9.213a1 1 0 0 1 1.414-.016Z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.cdc-check input:focus-visible + .cdc-check-box {
  outline: 3px solid var(--cdc-focus);
  outline-offset: 3px;
}

/* ==========================================================================
   05. CARTÕES
   ========================================================================== */

.cdc-card {
  display: block;
  background: var(--cdc-surface);
  border: 1px solid var(--cdc-border);
  border-radius: var(--cdc-radius-xl);
  box-shadow: var(--cdc-elev-1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.cdc-card--flat  { box-shadow: none; }
.cdc-card--raise { box-shadow: var(--cdc-elev-3); border-color: transparent; }
.cdc-card-body   { padding: var(--cdc-space-4); }
.cdc-card-title  { font-size: var(--cdc-text-xl); font-weight: var(--cdc-weight-medium); color: var(--cdc-brand-dark); line-height: var(--cdc-leading-snug); margin: 0 0 var(--cdc-space-2); }
.cdc-card-meta   { display: flex; align-items: center; gap: var(--cdc-space-3); font-size: var(--cdc-text-xs); color: var(--cdc-brand-deep); }

/* Mídia com proporção fixa: sem CLS e sem depender de padding-top hack. */
.cdc-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--cdc-gray-50);
  overflow: hidden;
}
.cdc-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdc-card-media--square  { aspect-ratio: 1 / 1; }
.cdc-card-media--portrait { aspect-ratio: 3 / 4; }

/* Cartão horizontal — o formato mais eficiente em celular: imagem pequena,
   título grande, decisão rápida, cabem mais itens por tela. */
.cdc-card--row {
  display: grid;
  grid-template-columns: var(--cdc-thumb-md) minmax(0, 1fr);
  gap: var(--cdc-space-3);
  align-items: stretch;
  padding: var(--cdc-space-2);
  border-radius: var(--cdc-radius-xl);
}
.cdc-card--row .cdc-card-media { aspect-ratio: 1 / 1; border-radius: var(--cdc-radius-lg); }
.cdc-card--row .cdc-card-body  { padding: var(--cdc-space-1) var(--cdc-space-2) var(--cdc-space-1) 0; display: flex; flex-direction: column; justify-content: center; gap: var(--cdc-space-1); }
.cdc-card--row .cdc-card-title { font-size: var(--cdc-text-md); margin: 0; }

/* Trilho horizontal com snap — descoberta por deslize, padrão de app. */
.cdc-rail {
  display: flex;
  gap: var(--cdc-space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--cdc-space-1) 0 var(--cdc-space-4);
  margin: 0;
  list-style: none;
  scrollbar-width: none;
}
.cdc-rail::-webkit-scrollbar { display: none; }
.cdc-rail > * { flex: 0 0 auto; width: 160px; scroll-snap-align: start; }
.cdc-rail--wide > * { width: 240px; }

/* ==========================================================================
   06. LISTAS E LINHAS
   ========================================================================== */

.cdc-list { margin: 0; padding: 0; list-style: none; }
.cdc-list li { list-style: none; margin: 0; }

.cdc-row {
  display: flex;
  align-items: center;
  gap: var(--cdc-space-3);
  min-height: var(--cdc-tap);
  padding: var(--cdc-space-3) var(--cdc-space-1);
  border-bottom: 1px solid var(--cdc-border);
  color: var(--cdc-brand-dark);
  font-size: var(--cdc-text-md);
  text-decoration: none;
}
.cdc-row:last-child { border-bottom: 0; }
.cdc-row-main { flex: 1 1 auto; min-width: 0; }
.cdc-row-sub  { display: block; font-size: var(--cdc-text-xs); color: var(--cdc-text-muted); }
.cdc-row-end  { flex: 0 0 auto; color: var(--cdc-text-muted); }

/* Passos numerados — o número é informação (ordem do preparo), não enfeite. */
.cdc-steps { counter-reset: cdc-step; display: flex; flex-direction: column; gap: var(--cdc-space-6); margin: 0; padding: 0; list-style: none; }
.cdc-steps > li {
  counter-increment: cdc-step;
  position: relative;
  padding-left: calc(var(--cdc-icon-lg) + var(--cdc-space-3));
  list-style: none;
}
.cdc-steps > li::before {
  content: counter(cdc-step);
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--cdc-radius-circle);
  background: var(--cdc-accent);
  color: var(--cdc-brand-deep);
  font-weight: var(--cdc-weight-bold);
  font-size: var(--cdc-text-sm);
}
.cdc-steps > li.is-done::before {
  background: var(--cdc-success);
  color: var(--cdc-gray-0);
  content: "✓";
}

/* ==========================================================================
   07. PROGRESSO, MEDIDORES E SKELETON
   ========================================================================== */

.cdc-meter {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-gray-200);
  overflow: hidden;
}
.cdc-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--cdc-accent);
  transition: width var(--cdc-dur-base) var(--cdc-ease);
}
.cdc-meter--success .cdc-meter-fill { background: var(--cdc-success); }

.cdc-skeleton {
  position: relative;
  background: var(--cdc-gray-200);
  border-radius: var(--cdc-radius-lg);
  overflow: hidden;
}
.cdc-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: var(--cdc-shimmer);
  animation: cdc-shimmer 1.6s infinite;
}
@keyframes cdc-shimmer { 100% { transform: translateX(100%); } }

/* ==========================================================================
   08. FEEDBACK
   ========================================================================== */

.cdc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--cdc-tabbar-h) + var(--cdc-anchor-h) + var(--cdc-safe-b) + 72px);
  z-index: var(--cdc-z-toast);
  transform: translateX(-50%);
  max-width: min(90vw, 420px);
  padding: var(--cdc-space-3) var(--cdc-space-5);
  border-radius: var(--cdc-radius-pill);
  background: var(--cdc-surface-inverse);
  color: var(--cdc-gray-0);
  font-size: var(--cdc-text-sm);
  text-align: center;
  box-shadow: var(--cdc-elev-4);
}
.cdc-toast[hidden] { display: none; }

.cdc-note {
  display: flex;
  gap: var(--cdc-space-3);
  padding: var(--cdc-space-4);
  border: 1px solid var(--cdc-border);
  border-left: 4px solid var(--cdc-accent);
  border-radius: var(--cdc-radius-sm);
  background: var(--cdc-amber-50);
  color: var(--cdc-text);
  font-size: var(--cdc-text-sm);
  line-height: var(--cdc-leading-snug);
}
.cdc-note--info    { background: var(--cdc-info-50); border-left-color: var(--cdc-info); }
.cdc-note--success { background: var(--cdc-success-50); border-left-color: var(--cdc-success); }
.cdc-note--danger  { background: var(--cdc-red-50); border-left-color: var(--cdc-danger); }

/* Barra de ação fixa — base do CTA persistente da receita. */
.cdc-actionbar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--cdc-tabbar-h) + var(--cdc-anchor-h) + var(--cdc-safe-b));
  z-index: var(--cdc-z-tabbar);
  display: flex;
  align-items: center;
  gap: var(--cdc-space-2);
  padding: var(--cdc-space-2) var(--cdc-space-3);
  padding-left: calc(var(--cdc-space-3) + var(--cdc-safe-l));
  padding-right: calc(var(--cdc-space-3) + var(--cdc-safe-r));
  background: var(--cdc-surface-veil);
  border-top: 1px solid var(--cdc-border);
  box-shadow: var(--cdc-elev-up);
  transform: translateY(110%);
  transition: transform var(--cdc-dur-base) var(--cdc-ease);
}
.cdc-actionbar.is-on { transform: translateY(0); }

/* ==========================================================================
   09. SUPERFÍCIES
   ========================================================================== */

.cdc-sheet[hidden] { display: none; }
.cdc-sheet { position: fixed; inset: 0; z-index: var(--cdc-z-sheet); }

.cdc-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--cdc-scrim-modal);
  opacity: 0;
  transition: opacity var(--cdc-dur-base) var(--cdc-ease);
}
.cdc-sheet.is-open .cdc-sheet-backdrop { opacity: 1; }

.cdc-sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--cdc-surface);
  border-radius: var(--cdc-radius-xl) var(--cdc-radius-xl) 0 0;
  padding: var(--cdc-space-2) var(--cdc-space-4) calc(var(--cdc-space-6) + var(--cdc-safe-b));
  transform: translateY(100%);
  transition: transform var(--cdc-dur-slow) var(--cdc-ease);
}
.cdc-sheet.is-open .cdc-sheet-panel { transform: translateY(0); }

@media (min-width: 1024px) {
  .cdc-sheet-panel {
    left: 50%; right: auto; bottom: auto; top: 10vh;
    width: min(560px, 92vw);
    max-height: 78vh;
    border-radius: var(--cdc-radius-lg);
    transform: translate(-50%, 20px);
  }
  .cdc-sheet.is-open .cdc-sheet-panel { transform: translate(-50%, 0); }
}

.cdc-sheet-grip { width: 40px; height: 4px; margin: var(--cdc-space-1) auto var(--cdc-space-3); border-radius: var(--cdc-radius-2xs); background: var(--cdc-border); }
.cdc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cdc-space-3); margin-bottom: var(--cdc-space-4); }
.cdc-sheet-title { font-family: var(--cdc-font-display); font-size: var(--cdc-text-2xl); line-height: var(--cdc-leading-tight); color: var(--cdc-text-brand); margin: 0; }
.cdc-sheet-sub {
  margin: var(--cdc-space-5) 0 var(--cdc-space-2);
  font-size: var(--cdc-text-xs);
  font-weight: var(--cdc-weight-bold);
  letter-spacing: var(--cdc-tracking-caps);
  text-transform: uppercase;
  color: var(--cdc-text-muted);
}
.cdc-sheet-close {
  flex: 0 0 auto;
  width: var(--cdc-tap); height: var(--cdc-tap);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--cdc-radius-circle);
  background: var(--cdc-tint-line-48);
  cursor: pointer;
}
.cdc-sheet-close svg { block-size: var(--cdc-icon-sm); inline-size: var(--cdc-icon-sm); fill: var(--cdc-brand-dark); }

/* ==========================================================================
   10. BLOCOS DE ANÚNCIO
   --------------------------------------------------------------------------
   O anúncio faz parte do design system, não é um corpo estranho colado depois.
   Tratá-lo como componente é o que garante rótulo consistente, reserva de
   altura correta e respiro suficiente para não competir com o conteúdo — que é
   exatamente o que sustenta CPM alto em vez de clique acidental.
   ========================================================================== */

.cdc-ad {
  display: block;
  width: 100%;
  margin: var(--cdc-space-6) 0;
  text-align: center;
  min-height: calc(var(--h, 280px) + 18px);
  contain: layout style;
}
.cdc-ad-label {
  display: block;
  margin-bottom: var(--cdc-space-1);
  font-size: var(--cdc-text-3xs);
  line-height: 14px;
  letter-spacing: var(--cdc-tracking-caps);
  text-transform: uppercase;
  color: var(--cdc-text-muted);
}
.cdc-ad-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h, 280px);
  overflow: hidden;
}
/* Regra de negócio do grupo: espaço reservado nunca colapsa sozinho. */
.cdc-ad-box:empty { min-height: var(--h, 280px); }
.cdc-ad iframe, .cdc-ad ins, .cdc-ad img { max-width: 100%; }

/* Separador que deixa claro onde termina o conteúdo e começa o anúncio.
   Reduz clique acidental — que é a maior fonte de tráfego inválido em receita. */
.cdc-ad--fenced {
  padding: var(--cdc-space-3) 0;
  border-top: 1px solid var(--cdc-border);
  border-bottom: 1px solid var(--cdc-border);
  background: var(--cdc-gray-25);
}

/* ==========================================================================
   11. COMPONENTES DE PAINEL
   --------------------------------------------------------------------------
   Para "Minha conta", receitas salvas e qualquer painel interno futuro.
   Mesmos tokens, densidade maior.
   ========================================================================== */

.cdc-panel {
  background: var(--cdc-surface);
  border: 1px solid var(--cdc-border);
  border-radius: var(--cdc-radius-lg);
  padding: var(--cdc-space-5);
}
.cdc-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cdc-space-3); margin-bottom: var(--cdc-space-4); }
.cdc-panel-title { font-size: var(--cdc-text-xl); font-weight: var(--cdc-weight-bold); color: var(--cdc-brand-dark); margin: 0; }

.cdc-stat { display: flex; flex-direction: column; gap: var(--cdc-space-05); }
.cdc-stat-value { font-family: var(--cdc-font-display); font-size: var(--cdc-text-3xl); font-weight: var(--cdc-weight-bold); color: var(--cdc-text-brand); line-height: 1; }
.cdc-stat-label { font-size: var(--cdc-text-xs); color: var(--cdc-text-muted); letter-spacing: var(--cdc-tracking-caps); text-transform: uppercase; }

.cdc-grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--cdc-space-4); }

.cdc-empty { text-align: center; padding: var(--cdc-space-10) var(--cdc-space-4); }
.cdc-empty-title { font-family: var(--cdc-font-display); font-size: var(--cdc-text-2xl); color: var(--cdc-text-brand); margin: 0 0 var(--cdc-space-2); }
.cdc-empty-text  { font-size: var(--cdc-text-md); color: var(--cdc-text-muted); margin: 0 0 var(--cdc-space-5); }

.cdc-divider { height: 1px; border: 0; margin: var(--cdc-space-6) 0; background: var(--cdc-border); }

/* ==========================================================================
   PREFERÊNCIAS DO SISTEMA
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cdc-skeleton::before { animation: none; }
  .cdc-btn:active { transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --cdc-text-muted:     #3A3A3A;
    --cdc-border:         #8C8C8C;
    --cdc-border-control: rgba(0, 0, 0, .78);
  }
}