/* ==========================================================================
   Design tokens — Chef Rita Lonato
   Tudo que é cor, fonte, tamanho e espaçamento mora aqui.
   Cores extraídas da capa e das páginas do e-book "Doces que Cuidam".
   Contrastes (WCAG) anotados em relação ao fundo --paper.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Fontes reserva com medidas ajustadas às definitivas: enquanto a Cormorant
   e a Cinzel carregam, o texto ocupa quase o mesmo espaço e a página não pula. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  size-adjust: 96%;
  ascent-override: 96%;
  descent-override: 30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Fallback";
  font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic");
  size-adjust: 94%;
  ascent-override: 98%;
  descent-override: 30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cinzel Fallback";
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold");
  size-adjust: 104%;
}

:root {
  /* Papel */
  --paper: #fbf5ec;          /* fundo principal (marfim) */
  --paper-deep: #f4e9da;     /* pergaminho, áreas de apoio */
  --paper-card: #fffaf3;     /* miolo dos cartões */
  --rose-wash: #f6e3de;      /* fundo do cartão da receita grátis */

  /* Tinta */
  --ink: #4a3326;            /* texto principal — 10.8:1 */
  --ink-soft: #6b4a2b;       /* texto secundário — 7.3:1 */
  --ink-muted: #7a5a44;      /* notas pequenas — 5.7:1 */

  /* Dourado */
  --gold: #a8763e;           /* ornamentos, bordas, títulos >= 24px — 3.6:1 (só texto grande) */
  --gold-text: #8a5f2e;      /* dourado para texto de qualquer tamanho — 5.2:1 */
  --gold-light: #d4a84a;     /* brilho do metal (só decorativo) */
  --gold-line: rgba(168, 118, 62, 0.55);

  /* Botão principal (bronze do logo) — texto creme 5.5:1 a 6.7:1 */
  --btn-top: #8c5b28;
  --btn-bottom: #7a4f1f;
  --btn-text: #fff8ee;

  /* Rosa aquarela */
  --rose: #e9b9bc;
  --rose-deep: #c98a90;      /* só decorativo */

  /* Estados */
  --error: #9b2c2c;          /* 6.9:1 sobre --paper-card */
  --focus: #4a3326;

  /* Tipografia */
  --font-display: "Cinzel", "Cinzel Fallback", serif;
  --font-serif: "Cormorant Garamond", "Cormorant Fallback", "Georgia", serif;

  --text-xs: 1rem;           /* 16px — notas, consentimento */
  --text-sm: 1.125rem;       /* 18px */
  --text-base: 1.25rem;      /* 20px — Cormorant tem olho pequeno; 20px lê como 17px */
  --text-md: 1.4375rem;      /* 23px */
  --text-lg: 1.875rem;       /* 30px — títulos de seção */
  --text-xl: 2.375rem;       /* 38px — nome */
  --text-display: clamp(1.375rem, 6.4vw, 1.875rem); /* título do e-book em Cinzel */

  --leading: 1.5;
  --leading-tight: 1.12;

  /* Espaço (escala de 4px) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  --gutter: 1rem;            /* margem lateral no celular */
  --column: 30rem;           /* largura máxima da coluna (480px) */
  --tap: 2.75rem;            /* alvo de toque mínimo (44px) */

  --radius-btn: 999px;
  --radius-card: 4px;

  --shadow-book: 0 1px 1px rgba(74, 51, 38, 0.12), 0 10px 18px -6px rgba(74, 51, 38, 0.28),
    0 26px 40px -18px rgba(74, 51, 38, 0.35);
  --shadow-btn: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 14px -6px rgba(122, 79, 31, 0.6);

  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}
