/* ==========================================================================
   Ayumi Doces do Bem — Design tokens para web
   Fonte: identidade visual 2024 + cartela 2025 + decisões de 21/09/2026.
   "Oficial" = cor da marca. "Derivado" = tom criado para UI a partir da
   paleta (texto legível, hover, fundos); não aparece em peça impressa.
   ========================================================================== */

/* Fontes de fallback livres (OFL), incluídas na pasta /fonts.
   Se a equipe tiver licença web da Aelyn, trocar --font-display por ela. */
@font-face { font-family: "Cormorant Garamond"; src: url("./fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("./fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("./fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("./fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* ---- Paleta oficial · Núcleo (usar sempre) ---- */
  --ayumi-verde: #005151;          /* verde profundo — âncora da marca */
  --ayumi-rosa: #d0787e;           /* rosa queimado (arquivo do logo) */
  --ayumi-rosa-terroso: #bb777d;   /* rosa do manual 2024 — um rosa por tela */
  --ayumi-rosa-claro: #eebabc;
  --ayumi-bege: #dfd5c9;
  --ayumi-dourado: #c6a54b;        /* mostarda chapado — fio, contorno, detalhe */

  /* ---- Paleta oficial · Extensão 2025 (usar com intenção) ---- */
  --ayumi-salvia: #75875f;
  --ayumi-azul-acinzentado: #8595b9;
  --ayumi-terracota: #dd8a60;
  --ayumi-creme: #fdf0d0;

  /* ---- Derivados para UI ---- */
  --ayumi-verde-900: #003d3d;      /* hover/pressed do verde */
  --ayumi-verde-050: #e6efee;      /* fundo de linha selecionada */
  --ayumi-tinta: #1e2b2b;          /* texto corrido — 14.6:1 no branco */
  --ayumi-cinza: #5b6666;          /* texto secundário — 5.9:1 no branco */
  --ayumi-linha: #e3dcd2;          /* bordas e divisórias */
  --ayumi-fundo: #f7f3ee;          /* fundo de página (bege bem claro) */
  --ayumi-rosa-texto: #9a4f55;     /* rosa legível para TEXTO — 5.8:1 no branco */
  --ayumi-dourado-texto: #7a6224;  /* dourado legível para TEXTO — 5.8:1 no branco */

  /* ---- Semânticos ---- */
  --color-bg: var(--ayumi-fundo);
  --color-surface: #ffffff;
  --color-surface-alt: var(--ayumi-bege);
  --color-brand: var(--ayumi-verde);
  --color-brand-hover: var(--ayumi-verde-900);
  --color-on-brand: #ffffff;
  --color-accent: var(--ayumi-rosa);          /* só superfície/ícone, nunca texto pequeno */
  --color-ornament: var(--ayumi-dourado);     /* só fio, ícone, quadrifólio */
  --color-text: var(--ayumi-tinta);
  --color-text-muted: var(--ayumi-cinza);
  --color-heading: var(--ayumi-verde);
  --color-border: var(--ayumi-linha);
  --color-focus: var(--ayumi-dourado);

  /* ---- Tipografia ---- */
  --font-display: "Aelyn", "Cormorant Garamond", "Playfair Display", Georgia, serif; /* títulos — SÓ peso regular */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;       /* interface e dados */
  --font-nutri: Arial, Helvetica, "Liberation Sans", sans-serif;                        /* tabela nutricional (IN 75/2020) */

  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16 */
  --text-lg: 1.25rem;   /* 20 */
  --text-xl: 1.75rem;   /* 28 */
  --text-2xl: 2.5rem;   /* 40 */
  --text-3xl: 3.5rem;   /* 56 */

  --tracking-kicker: 0.22em;   /* caixa alta com tracking largo — assinatura da marca */
  --leading-body: 1.6;
  --leading-title: 1.1;

  /* ---- Espaço, forma, sombra ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;        /* cápsulas (kicker, tag, preço) */
  --radius-arch: 999px 999px 0 0; /* o arco das lojas */
  --shadow-control: 0 1px 2px rgba(0, 61, 61, .04), 0 4px 12px rgba(0, 61, 61, .025);
  --shadow-list: 0 1px 3px rgba(0, 61, 61, .045);
  --shadow-card: 0 1px 2px rgba(0, 61, 61, .07), 0 12px 24px -12px rgba(0, 61, 61, .16), 0 28px 48px -20px rgba(0, 61, 61, .12);
  --surface-reading-head: #f4f4ed; /* claro derivado para cabeçalho da ficha */
  --surface-ease: cubic-bezier(.18, .8, .25, 1);
  --hairline: 1px solid var(--ayumi-dourado); /* fio dourado */
}