/* ============================================================================
   COFFEE BLEND — DESIGN SYSTEM · 01. TOKENS
   ----------------------------------------------------------------------------
   Arquitetura extraída do tema Horizon/PureUp e reaplicada com a marca
   Coffee Blend. Duas camadas, na ordem:

     1. PRIMITIVAS  (:root)  — a paleta crua + escalas. Nunca usar direto
                               em componente.
     2. ESQUEMAS    (.cb-scheme-*) — contrato semântico. Cada esquema é uma
                               "lâmina" de cor completa e trocável. Componente
                               só consome token semântico, nunca primitiva.

   Regra de ouro do sistema (a mesma do PureUp): a cor do título é
   DESACOPLADA da cor do corpo (--cb-fg vs --cb-fg-heading). É isso que
   permite título amarelo sobre fundo café sem escrever CSS novo.

   Prefixo --cb-* para não colidir com tema WordPress/Shopify hospedeiro.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   TIPOGRAFIA DA MARCA
   Pais é a fonte institucional. Poppins é o fallback de sistema já usado
   nas seções UI V2.

   Só woff2: suporte universal desde 2016 e menos da metade do peso do .otf
   (364 KB → 161 KB nos três pesos). Os .otf originais seguem em fonts/ como
   matriz para reconversão, mas nenhum navegador os baixa. Para regerar:
     python3 -c "from fontTools.ttLib import TTFont; f=TTFont('X.otf'); f.flavor='woff2'; f.save('X.woff2')"
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'Pais';
  src: url('../fonts/Pais-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pais';
  src: url('../fonts/Pais-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pais';
  src: url('../fonts/Pais-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Figtree — grotesca geométrica-humanista, desenho próximo ao da Degular que
   a Guday usa, mas com licença livre (OFL). Arquivo VARIÁVEL: um só cobre de
   300 a 900, em 20 KB, contra 161 KB dos três pesos da Pais.

   Trocar --cb-font-brand lá embaixo devolve a Pais na hora: as duas ficam
   declaradas aqui de propósito, para a volta ser de uma linha. */
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Caveat — a voz manuscrita que atravessa os títulos. Não é fonte da marca:
   entrou para reproduzir o gesto da referência (uma palavra escrita à mão
   sobre o título em caixa alta). Self-hosted de propósito — Google Fonts via
   CDN entrega IP do visitante a terceiro, o que é briga desnecessária com a
   LGPD num site brasileiro. */
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===========================================================================
   1. PRIMITIVAS
   =========================================================================== */

:root {
  /* -------- Paleta · Café (marrons da marca) ---------------------------- */
  --cb-coffee-900: #241209;
  --cb-coffee-800: #2a160c;
  --cb-coffee-700: #3d200d;
  --cb-coffee-600: #542915; /* cor primária da marca */
  --cb-coffee-500: #7b442a;
  --cb-coffee-400: #965639;
  --cb-coffee-300: #c99a72;
  --cb-coffee-200: #cbb89e;

  /* -------- Paleta · Creme (fundos) ------------------------------------- */
  --cb-cream-50: #fbf6ee;
  --cb-cream-100: #f7f0e6;
  --cb-cream-200: #f5eadc; /* fundo padrão da marca */
  --cb-cream-300: #f2edda;
  --cb-cream-400: #ede4d4;
  --cb-cream-500: #d9cbb4;

  /* -------- Paleta · Amarelo Blend (acento principal) ------------------- */
  --cb-yellow-300: #ece68f;
  --cb-yellow-400: #e4dc6c;
  --cb-yellow-500: #dcd24c; /* acento da marca */
  --cb-yellow-600: #bfb63c;

  /* -------- Paleta · Apoio ---------------------------------------------- */
  --cb-peach-500: #ff9e6e;
  --cb-gold-500: #d4963a;
  --cb-gold-600: #c4761a;
  --cb-green-100: #eef7e6;
  --cb-green-200: #d8ecc6;
  --cb-green-600: #4a7c28;

  /* -------- Paleta · Neutros e feedback --------------------------------- */
  --cb-white: #ffffff;
  --cb-black: #000000;
  --cb-mud-500: #8a6459; /* marrom acinzentado, texto secundário */
  --cb-mud-400: #b3a392;
  --cb-danger: #f30202;  /* o "X" das tabelas comparativas */
  --cb-success: var(--cb-green-600);

  /* -------- Famílias ----------------------------------------------------- */
  --cb-font-brand: 'Figtree', 'Pais', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cb-font-body: var(--cb-font-brand);
  --cb-font-heading: var(--cb-font-brand);
  --cb-font-script: 'Caveat', 'Segoe Script', cursive;

  --cb-weight-regular: 400;
  --cb-weight-medium: 500;
  --cb-weight-bold: 700;

  /* -------- Escala tipográfica fluida ------------------------------------
     Trava a régua mobile da casa: h1 = 26px, corpo = 15-16px.
     Cresce por vw até o teto de desktop. Sem media query.
  ------------------------------------------------------------------------- */
  --cb-text-display: clamp(1.875rem, 1rem + 3.7vw, 4rem);      /* 30 → 64 */
  --cb-text-h1: clamp(1.625rem, 0.95rem + 2.9vw, 3rem);        /* 26 → 48 */
  --cb-text-h2: clamp(1.5rem, 0.95rem + 2.35vw, 2.5rem);       /* 24 → 40 */
  --cb-text-h3: clamp(1.25rem, 0.95rem + 1.3vw, 1.75rem);      /* 20 → 28 */
  --cb-text-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);     /* 18 → 20 */
  --cb-text-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);      /* 15 → 16 */
  --cb-text-sm: 0.875rem;                                       /* 14 */
  --cb-text-xs: 0.75rem;                                        /* 12 */
  --cb-text-2xs: 0.6875rem;                                     /* 11 */

  /* -------- Escala de INTERFACE -------------------------------------------
     Separada da editorial de propósito. As duas convivem porque fazem
     trabalhos diferentes:

       editorial (--cb-text-h1/h2/display)  título de seção, hero, manchete.
                                            Grande, respirada, com a
                                            assinatura manuscrita.
       interface (--cb-ui-*)                cartão, lista, controle, preço.
                                            Menor, mais pesada, tracking
                                            apertado — é o que faz o
                                            componente ler como app e não
                                            como página.

     Usar a escala editorial dentro de um cartão é o erro clássico que faz
     app parecer site: o título do produto compete com o título da seção.
  ------------------------------------------------------------------------- */
  --cb-ui-title: 1.0625rem;   /* 17 — nome de produto no cartão */
  --cb-ui-title-sm: 0.9375rem;/* 15 — nome em lista compacta */
  /* Escala subida um ponto em 25/08/2026: a área de compra estava toda em
     12 e 13 px, e 12 px num celular é onde a pessoa aperta os olhos bem na
     hora de decidir. Subir a ESCALA, e não cada regra, mantém a hierarquia
     relativa intacta — o que era menor continua menor. */
  --cb-ui-body: 0.9375rem;    /* 15 — apoio, variante, endereço */
  --cb-ui-label: 0.875rem;    /* 14 — rótulo de controle */
  --cb-ui-caption: 0.8125rem; /* 13 — legenda, contagem */
  --cb-ui-price: 1.0625rem;   /* 17 — preço dentro do botão-preço */

  --cb-ui-leading: 1.28;
  --cb-ui-tracking: -0.014em;

  /* -------- Entrelinha ---------------------------------------------------- */
  --cb-leading-display: 1.05;
  --cb-leading-heading: 1.15;
  --cb-leading-snug: 1.3;
  --cb-leading-body: 1.5;
  --cb-leading-loose: 1.65;

  /* -------- Tracking ------------------------------------------------------ */
  --cb-tracking-display: -0.03em;
  --cb-tracking-heading: -0.02em;
  --cb-tracking-body: -0.01em;
  --cb-tracking-wide: 0.06em;
  --cb-tracking-wider: 0.13em;

  /* -------- Medida (largura de linha legível) ----------------------------- */
  --cb-measure-display: 15ch;
  --cb-measure-heading: 30ch;
  --cb-measure-body: 60ch;
  --cb-measure-body-narrow: 42ch;

  /* -------- Espaçamento --------------------------------------------------- */
  --cb-space-3xs: 0.25rem;  /* 4  */
  --cb-space-2xs: 0.5rem;   /* 8  */
  --cb-space-xs: 0.75rem;   /* 12 */
  --cb-space-sm: 1rem;      /* 16 */
  --cb-space-md: 1.25rem;   /* 20 */
  --cb-space-lg: 1.875rem;  /* 30 — o padding mobile da casa */
  --cb-space-xl: 2.5rem;    /* 40 */
  --cb-space-2xl: 3.75rem;  /* 60 */
  --cb-space-3xl: 5rem;     /* 80 */
  --cb-space-4xl: 7.5rem;   /* 120 */

  /* Respiro vertical de seção: aperta no mobile, abre no desktop. */
  --cb-section-gap: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem);
  /* Sarjeta lateral. O mosaico do PureUp usa 5px; a casa usa 20-30px de
     padding interno. Os dois convivem: gutter externo fino, padding interno. */
  --cb-gutter: 0.625rem;   /* 10 — respiro da borda da viewport */
  --cb-mosaic-gap: 0.3125rem; /* 5 — o "rejunte" entre blocos do mosaico */
  --cb-pad-inline: 1.25rem;   /* 20 — padding interno mobile */

  /* -------- Larguras ------------------------------------------------------ */
  --cb-width-content: 68.75rem; /* 1100 — coluna de leitura/produto */
  --cb-width-page: 90rem;       /* 1440 — trilho máximo do site */
  --cb-width-wide: 100rem;      /* 1600 — seções que respiram mais */

  /* -------- Raios ---------------------------------------------------------
     PureUp usa botão quadrado (0px) + blocos 8px. A Coffee Blend usa botão
     pílula (58px) + cartões 17px. Mantive a arquitetura, troquei os valores.
  ------------------------------------------------------------------------- */
  --cb-radius-xs: 0.25rem;   /* 4  — inputs, tags pequenas */
  --cb-radius-sm: 0.5rem;    /* 8  — bloco de mosaico */
  --cb-radius-md: 1.0625rem; /* 17 — cartão (valor nativo da marca) */
  --cb-radius-lg: 1.5rem;    /* 24 — cartão grande, drawer */
  --cb-radius-pill: 62.4375rem;

  /* -------- Bordas -------------------------------------------------------- */
  --cb-border-hair: 0.05rem;  /* 0.8px — o filete fino do card econômico */
  --cb-border-thin: 1px;
  --cb-border-thick: 2px;

  /* -------- Elevação ------------------------------------------------------ */
  --cb-shadow-sm: 0 1px 2px rgb(36 18 9 / 0.08);
  --cb-shadow-md: 0 4px 14px rgb(36 18 9 / 0.10);
  --cb-shadow-lg: 0 12px 32px rgb(36 18 9 / 0.16);
  --cb-shadow-button: 0 2px 3px rgb(36 18 9 / 0.20);

  /* Máscaras de leitura sobre foto. A vertical serve quando o texto senta na
     base; a lateral, quando o texto vai para a esquerda (desktop). */
  --cb-overlay-image: linear-gradient(
    to top,
    rgb(36 18 9 / 0.92) 0%,
    rgb(36 18 9 / 0.72) 28%,
    rgb(36 18 9 / 0.24) 58%,
    rgb(36 18 9 / 0) 80%
  );
  --cb-overlay-image-side: linear-gradient(
    100deg,
    rgb(36 18 9 / 0.88) 0%,
    rgb(36 18 9 / 0.62) 32%,
    rgb(36 18 9 / 0) 64%
  );

  /* -------- Movimento ------------------------------------------------------ */
  --cb-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --cb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --cb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cb-duration-fast: 120ms;
  --cb-duration-base: 200ms;
  --cb-duration-slow: 320ms;

  /* -------- Camadas -------------------------------------------------------- */
  --cb-layer-base: 0;
  --cb-layer-raised: 2;
  --cb-layer-sticky: 8;
  --cb-layer-header: 12;
  --cb-layer-overlay: 16;
  --cb-layer-drawer: 18;
  /* Acima de tudo: cobre a página inteira enquanto ela monta. */
  --cb-layer-splash: 24;
  /* Acima da barra de abas e do WhatsApp; abaixo do splash. */
  --cb-layer-cookies: 20;

  /* -------- Alvos de toque / ícones ----------------------------------------- */
  --cb-touch-target: 44px;
  --cb-icon-sm: 1rem;
  --cb-icon-md: 1.375rem;
  --cb-icon-lg: 1.5rem;
  --cb-icon-stroke: 1.5px;

  /* -------- Foco ------------------------------------------------------------ */
  --cb-focus-width: 2px;
  --cb-focus-offset: 3px;

  /* Libera a animação de `height: auto` — sem isto o accordion abre em salto
     em vez de deslizar. Navegador que não conhece a propriedade só ignora. */
  interpolate-size: allow-keywords;
}

/* ===========================================================================
   2. ESQUEMAS DE COR
   ---------------------------------------------------------------------------
   Cada classe entrega o mesmo contrato de 20 tokens. Aplicar em <section>,
   em um bloco de mosaico ou no <body>. Componentes herdam sozinhos.

   Contrato:
     --cb-bg / --cb-bg-rgb        fundo da lâmina
     --cb-fg / --cb-fg-rgb        texto corrido
     --cb-fg-heading              títulos (desacoplado do corpo!)
     --cb-fg-muted                texto de apoio
     --cb-accent                  destaque (preço, ícone, link)
     --cb-line                    borda/divisória
     --cb-btn-*                   botão primário e secundário + hover
     --cb-field-*                 campo de formulário
   =========================================================================== */

/* --- Creme · esquema padrão do site ------------------------------------- */
.cb-scheme-cream {
  --cb-bg: var(--cb-cream-200);
  --cb-bg-rgb: 245 234 220;
  --cb-fg: var(--cb-coffee-600);
  --cb-fg-rgb: 84 41 21;
  --cb-fg-heading: var(--cb-coffee-600);
  --cb-fg-muted: var(--cb-mud-500);
  --cb-accent: var(--cb-coffee-400);
  --cb-line: rgb(84 41 21 / 0.16);

  --cb-btn-fg: var(--cb-white);
  --cb-btn-bg: linear-gradient(90deg, var(--cb-coffee-400) 0%, var(--cb-coffee-600) 100%);
  --cb-btn-border: rgb(0 0 0 / 0.36);
  --cb-btn-bg-solid: var(--cb-coffee-600);
  --cb-btn-fg-hover: var(--cb-white);
  --cb-btn-bg-hover: linear-gradient(90deg, var(--cb-coffee-600) 0%, var(--cb-coffee-700) 100%);
  --cb-btn-border-hover: var(--cb-coffee-700);

  --cb-btn2-fg: var(--cb-coffee-600);
  --cb-btn2-bg: transparent;
  --cb-btn2-border: var(--cb-coffee-600);
  --cb-btn2-fg-hover: var(--cb-white);
  --cb-btn2-bg-hover: var(--cb-coffee-600);
  --cb-btn2-border-hover: var(--cb-coffee-600);

  --cb-field-bg: var(--cb-white);
  --cb-field-fg: var(--cb-coffee-700);
  --cb-field-border: rgb(84 41 21 / 0.25);
  --cb-field-placeholder: var(--cb-mud-500);
}

/* --- Branco · fichas de produto, checkout, conteúdo denso ---------------- */
.cb-scheme-white {
  --cb-bg: var(--cb-white);
  --cb-bg-rgb: 255 255 255;
  --cb-fg: var(--cb-coffee-600);
  --cb-fg-rgb: 84 41 21;
  --cb-fg-heading: var(--cb-coffee-600);
  --cb-fg-muted: var(--cb-mud-500);
  --cb-accent: var(--cb-coffee-400);
  --cb-line: rgb(84 41 21 / 0.14);

  --cb-btn-fg: var(--cb-white);
  --cb-btn-bg: linear-gradient(90deg, var(--cb-coffee-400) 0%, var(--cb-coffee-600) 100%);
  --cb-btn-border: rgb(0 0 0 / 0.36);
  --cb-btn-bg-solid: var(--cb-coffee-600);
  --cb-btn-fg-hover: var(--cb-white);
  --cb-btn-bg-hover: linear-gradient(90deg, var(--cb-coffee-600) 0%, var(--cb-coffee-700) 100%);
  --cb-btn-border-hover: var(--cb-coffee-700);

  --cb-btn2-fg: var(--cb-coffee-600);
  --cb-btn2-bg: transparent;
  --cb-btn2-border: rgb(84 41 21 / 0.35);
  --cb-btn2-fg-hover: var(--cb-coffee-700);
  --cb-btn2-bg-hover: var(--cb-cream-200);
  --cb-btn2-border-hover: var(--cb-coffee-600);

  --cb-field-bg: var(--cb-white);
  --cb-field-fg: var(--cb-coffee-700);
  --cb-field-border: rgb(84 41 21 / 0.25);
  --cb-field-placeholder: var(--cb-mud-500);
}

/* --- Areia · alternância suave contra o creme ---------------------------- */
.cb-scheme-sand {
  --cb-bg: var(--cb-cream-400);
  --cb-bg-rgb: 237 228 212;
  --cb-fg: var(--cb-coffee-600);
  --cb-fg-rgb: 84 41 21;
  --cb-fg-heading: var(--cb-coffee-700);
  --cb-fg-muted: var(--cb-mud-500);
  --cb-accent: var(--cb-coffee-400);
  --cb-line: rgb(84 41 21 / 0.18);

  --cb-btn-fg: var(--cb-white);
  --cb-btn-bg: linear-gradient(90deg, var(--cb-coffee-400) 0%, var(--cb-coffee-600) 100%);
  --cb-btn-border: rgb(0 0 0 / 0.36);
  --cb-btn-bg-solid: var(--cb-coffee-600);
  --cb-btn-fg-hover: var(--cb-white);
  --cb-btn-bg-hover: linear-gradient(90deg, var(--cb-coffee-600) 0%, var(--cb-coffee-700) 100%);
  --cb-btn-border-hover: var(--cb-coffee-700);

  --cb-btn2-fg: var(--cb-coffee-600);
  --cb-btn2-bg: transparent;
  --cb-btn2-border: var(--cb-coffee-500);
  --cb-btn2-fg-hover: var(--cb-white);
  --cb-btn2-bg-hover: var(--cb-coffee-600);
  --cb-btn2-border-hover: var(--cb-coffee-600);

  --cb-field-bg: var(--cb-white);
  --cb-field-fg: var(--cb-coffee-700);
  --cb-field-border: rgb(84 41 21 / 0.25);
  --cb-field-placeholder: var(--cb-mud-500);
}

/* --- Amarelo Blend · barras, faixas de oferta, blocos de impacto --------- */
.cb-scheme-yellow {
  --cb-bg: var(--cb-yellow-500);
  --cb-bg-rgb: 220 210 76;
  --cb-fg: var(--cb-coffee-600);
  --cb-fg-rgb: 84 41 21;
  --cb-fg-heading: var(--cb-coffee-700);
  --cb-fg-muted: var(--cb-coffee-500);
  --cb-accent: var(--cb-coffee-600);
  --cb-line: rgb(84 41 21 / 0.28);

  --cb-btn-fg: var(--cb-white);
  --cb-btn-bg: linear-gradient(90deg, var(--cb-coffee-400) 0%, var(--cb-coffee-600) 100%);
  --cb-btn-border: var(--cb-coffee-600);
  --cb-btn-bg-solid: var(--cb-coffee-600);
  --cb-btn-fg-hover: var(--cb-yellow-500);
  --cb-btn-bg-hover: linear-gradient(90deg, var(--cb-coffee-600) 0%, var(--cb-coffee-800) 100%);
  --cb-btn-border-hover: var(--cb-coffee-800);

  --cb-btn2-fg: var(--cb-coffee-600);
  --cb-btn2-bg: transparent;
  --cb-btn2-border: var(--cb-coffee-600);
  --cb-btn2-fg-hover: var(--cb-yellow-500);
  --cb-btn2-bg-hover: var(--cb-coffee-600);
  --cb-btn2-border-hover: var(--cb-coffee-600);

  --cb-field-bg: var(--cb-white);
  --cb-field-fg: var(--cb-coffee-700);
  --cb-field-border: var(--cb-coffee-500);
  --cb-field-placeholder: var(--cb-mud-500);
}

/* --- Café · a lâmina escura principal ------------------------------------ */
.cb-scheme-coffee {
  --cb-bg: var(--cb-coffee-600);
  --cb-bg-rgb: 84 41 21;
  --cb-fg: var(--cb-cream-200);
  --cb-fg-rgb: 245 234 220;
  --cb-fg-heading: var(--cb-yellow-500);
  --cb-fg-muted: rgb(245 234 220 / 0.72);
  --cb-accent: var(--cb-yellow-500);
  --cb-line: rgb(245 234 220 / 0.24);

  --cb-btn-fg: var(--cb-coffee-600);
  --cb-btn-bg: var(--cb-yellow-500);
  --cb-btn-border: var(--cb-yellow-500);
  --cb-btn-bg-solid: var(--cb-yellow-500);
  --cb-btn-fg-hover: var(--cb-coffee-700);
  --cb-btn-bg-hover: var(--cb-yellow-400);
  --cb-btn-border-hover: var(--cb-yellow-400);

  --cb-btn2-fg: var(--cb-cream-200);
  --cb-btn2-bg: transparent;
  --cb-btn2-border: rgb(245 234 220 / 0.55);
  --cb-btn2-fg-hover: var(--cb-coffee-600);
  --cb-btn2-bg-hover: var(--cb-cream-200);
  --cb-btn2-border-hover: var(--cb-cream-200);

  --cb-field-bg: rgb(255 255 255 / 0.08);
  --cb-field-fg: var(--cb-cream-100);
  --cb-field-border: rgb(245 234 220 / 0.35);
  --cb-field-placeholder: rgb(245 234 220 / 0.55);
}

/* --- Espresso · rodapé, faixas de máxima densidade ----------------------- */
.cb-scheme-espresso {
  --cb-bg: var(--cb-coffee-800);
  --cb-bg-rgb: 42 22 12;
  --cb-fg: var(--cb-cream-200);
  --cb-fg-rgb: 245 234 220;
  --cb-fg-heading: var(--cb-yellow-500);
  --cb-fg-muted: rgb(245 234 220 / 0.62);
  --cb-accent: var(--cb-yellow-500);
  --cb-line: rgb(245 234 220 / 0.18);

  --cb-btn-fg: var(--cb-coffee-800);
  --cb-btn-bg: var(--cb-yellow-500);
  --cb-btn-border: var(--cb-yellow-500);
  --cb-btn-bg-solid: var(--cb-yellow-500);
  --cb-btn-fg-hover: var(--cb-coffee-900);
  --cb-btn-bg-hover: var(--cb-yellow-400);
  --cb-btn-border-hover: var(--cb-yellow-400);

  --cb-btn2-fg: var(--cb-cream-200);
  --cb-btn2-bg: transparent;
  --cb-btn2-border: rgb(245 234 220 / 0.45);
  --cb-btn2-fg-hover: var(--cb-coffee-800);
  --cb-btn2-bg-hover: var(--cb-cream-200);
  --cb-btn2-border-hover: var(--cb-cream-200);

  --cb-field-bg: rgb(255 255 255 / 0.07);
  --cb-field-fg: var(--cb-cream-100);
  --cb-field-border: rgb(245 234 220 / 0.3);
  --cb-field-placeholder: rgb(245 234 220 / 0.5);
}

/* --- Caramelo · blocos médios do mosaico -------------------------------- */
.cb-scheme-caramel {
  --cb-bg: var(--cb-coffee-400);
  --cb-bg-rgb: 150 86 57;
  --cb-fg: var(--cb-cream-100);
  --cb-fg-rgb: 247 240 230;
  --cb-fg-heading: var(--cb-yellow-500);
  --cb-fg-muted: rgb(247 240 230 / 0.75);
  /* Amarelo mais claro que nos outros esquemas: o caramelo é um fundo de
     meio-tom, e o yellow-500 sobre ele cai para 3,6:1. O 300 devolve folga. */
  --cb-accent: var(--cb-yellow-300);
  --cb-line: rgb(247 240 230 / 0.28);

  --cb-btn-fg: var(--cb-coffee-600);
  --cb-btn-bg: var(--cb-yellow-500);
  --cb-btn-border: var(--cb-yellow-500);
  --cb-btn-bg-solid: var(--cb-yellow-500);
  --cb-btn-fg-hover: var(--cb-coffee-700);
  --cb-btn-bg-hover: var(--cb-yellow-400);
  --cb-btn-border-hover: var(--cb-yellow-400);

  --cb-btn2-fg: var(--cb-cream-100);
  --cb-btn2-bg: transparent;
  --cb-btn2-border: rgb(247 240 230 / 0.6);
  --cb-btn2-fg-hover: var(--cb-coffee-400);
  --cb-btn2-bg-hover: var(--cb-cream-100);
  --cb-btn2-border-hover: var(--cb-cream-100);

  --cb-field-bg: rgb(255 255 255 / 0.1);
  --cb-field-fg: var(--cb-cream-50);
  --cb-field-border: rgb(247 240 230 / 0.35);
  --cb-field-placeholder: rgb(247 240 230 / 0.55);
}

/* --- Pêssego · promoção, urgência, selo sazonal -------------------------- */
.cb-scheme-peach {
  --cb-bg: var(--cb-peach-500);
  --cb-bg-rgb: 255 158 110;
  --cb-fg: var(--cb-coffee-700);
  --cb-fg-rgb: 61 32 13;
  --cb-fg-heading: var(--cb-coffee-700);
  --cb-fg-muted: rgb(61 32 13 / 0.7);
  --cb-accent: var(--cb-coffee-600);
  --cb-line: rgb(61 32 13 / 0.28);

  --cb-btn-fg: var(--cb-peach-500);
  --cb-btn-bg: var(--cb-coffee-600);
  --cb-btn-border: var(--cb-coffee-600);
  --cb-btn-bg-solid: var(--cb-coffee-600);
  --cb-btn-fg-hover: var(--cb-peach-500);
  --cb-btn-bg-hover: var(--cb-coffee-700);
  --cb-btn-border-hover: var(--cb-coffee-700);

  --cb-btn2-fg: var(--cb-coffee-700);
  --cb-btn2-bg: transparent;
  --cb-btn2-border: var(--cb-coffee-700);
  --cb-btn2-fg-hover: var(--cb-peach-500);
  --cb-btn2-bg-hover: var(--cb-coffee-700);
  --cb-btn2-border-hover: var(--cb-coffee-700);

  --cb-field-bg: var(--cb-white);
  --cb-field-fg: var(--cb-coffee-700);
  --cb-field-border: var(--cb-coffee-600);
  --cb-field-placeholder: var(--cb-mud-500);
}

/* --- Menta · prova, benefício, "natural / sem aditivo" ------------------- */
.cb-scheme-mint {
  --cb-bg: var(--cb-green-100);
  --cb-bg-rgb: 238 247 230;
  --cb-fg: var(--cb-coffee-600);
  --cb-fg-rgb: 84 41 21;
  --cb-fg-heading: var(--cb-green-600);
  --cb-fg-muted: var(--cb-mud-500);
  --cb-accent: var(--cb-green-600);
  --cb-line: rgb(74 124 40 / 0.28);

  --cb-btn-fg: var(--cb-white);
  --cb-btn-bg: linear-gradient(90deg, var(--cb-coffee-400) 0%, var(--cb-coffee-600) 100%);
  --cb-btn-border: rgb(0 0 0 / 0.28);
  --cb-btn-bg-solid: var(--cb-coffee-600);
  --cb-btn-fg-hover: var(--cb-white);
  --cb-btn-bg-hover: linear-gradient(90deg, var(--cb-coffee-600) 0%, var(--cb-coffee-700) 100%);
  --cb-btn-border-hover: var(--cb-coffee-700);

  --cb-btn2-fg: var(--cb-green-600);
  --cb-btn2-bg: transparent;
  --cb-btn2-border: var(--cb-green-600);
  --cb-btn2-fg-hover: var(--cb-white);
  --cb-btn2-bg-hover: var(--cb-green-600);
  --cb-btn2-border-hover: var(--cb-green-600);

  --cb-field-bg: var(--cb-white);
  --cb-field-fg: var(--cb-coffee-700);
  --cb-field-border: rgb(74 124 40 / 0.35);
  --cb-field-placeholder: var(--cb-mud-500);
}

/* --- Transparente · bloco sobre imagem, herda o contexto ----------------- */
.cb-scheme-none {
  --cb-bg: transparent;
  --cb-line: rgb(255 255 255 / 0.35);
}