/* =================================================================
   CADERNO DO PADEIRO — base da identidade visual
   =================================================================
   Fonte da verdade: BRAND.md (Brand Book v1.0). Este arquivo é o único
   lugar com os tokens da marca; toda página o carrega ANTES do próprio
   CSS. Não acrescente tokens aqui sem antes acrescentá-los ao BRAND.md.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Marca */
  --primary:        #f97316;  /* Laranja Caderno */
  --primary-hover:  #ea580c;  /* Laranja Forno */
  --primary-light:  #fff7ed;  /* fundos de seleção / hover */
  --primary-border: #fed7aa;

  /* Neutros */
  --bg-main:    #fcfcfb;  /* Miolo — fundo de página */
  --bg-card:    #ffffff;
  --border-color: #f1f5f9;
  --text-main:  #111827;  /* Tinta */
  --text-muted: #64748b;

  /* Marketing (só peças, com moderação — não usar no app) */
  --cream: #faf9eb;
  --gold:  #b6a24a;

  /* Raios */
  --radius-sm: 12px;   /* botões, inputs, nav, botões-ícone */
  --radius-md: 16px;   /* ícone de card 56×56 */
  --radius-lg: 24px;   /* cards */
  --radius-pill: 999px;

  /* Sombras */
  --shadow-soft:  0 4px 20px -2px rgba(0,0,0,.04), 0 2px 8px -2px rgba(0,0,0,.02);
  --shadow-hover: 0 20px 25px -5px rgba(0,0,0,.05), 0 8px 10px -6px rgba(0,0,0,.05);
  --shadow-primary: 0 4px 12px rgba(249,115,22,.25);
}

/* Texto e fundo da marca. Cada página pode sobrescrever depois (este
   arquivo vem primeiro); o que não sobrescreve herda a marca. */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-main);
  background-color: var(--bg-main);
}

/* Valores e preços (BRAND §4) */
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ── Logo (BRAND §2) ─────────────────────────────────────────────
   Símbolo: quadrado com cantos de 30% do lado, degradê laranja, sombra
   da marca e o croissant "para cima" em branco ocupando 56%. Tamanho por
   --cd-logo (padrão 40px; mínimo 24px).
   Uso:
     <span class="cd-logo"><svg …croissant…></svg></span>
     <span class="cd-assinatura">Caderno <em>do Padeiro</em></span>   completa
     <span class="cd-assinatura cd-assinatura-curta">Caderno</span>    curta (app)
   ---------------------------------------------------------------- */
.cd-logo {
  --cd-logo: 40px;
  width: var(--cd-logo);
  height: var(--cd-logo);
  min-width: 24px;
  min-height: 24px;
  border-radius: calc(var(--cd-logo) * 0.3);
  background: linear-gradient(135deg, #f97316, #fb923c);
  box-shadow: 0 4px 12px rgba(249,115,22,.3);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cd-logo svg {
  width: 56%;
  height: 56%;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.cd-marca {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--cd-logo, 40px) * 0.32);
  text-decoration: none;
}
.cd-assinatura {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  white-space: nowrap;
}
.cd-assinatura em { font-style: normal; color: var(--primary); }
.cd-assinatura-curta { color: var(--primary); }
.cd-fundo-escuro .cd-assinatura { color: #ffffff; }
.cd-fundo-escuro .cd-assinatura em { color: var(--primary); }

/* Ícone Lucide em linha com texto (substitui emoji de interface) */
.cd-ic {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke-width: 2;
  flex-shrink: 0;
}