/* ============================================================================
   TRINDADE — Design Tokens (mazyUI adaptada · "claro editorial premium")
   Fonte da verdade dos tokens. As páginas consomem ESTAS variáveis — não
   redefinir HEX solto no HTML/CSS das páginas. Ver identidade/design-guide.md.
   Sem CDN externo. Fontes self-hosted em ../fonts/.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. FONTES SELF-HOSTED (woff2, subsets latin + latin-ext — cobrem português)
   --------------------------------------------------------------------------- */

/* Fraunces — serif editorial (títulos/display). Fallback: Georgia, serif. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-400.woff2") format("woff2"),
       url("../fonts/fraunces-400-ext.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-500.woff2") format("woff2"),
       url("../fonts/fraunces-500-ext.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-600.woff2") format("woff2"),
       url("../fonts/fraunces-600-ext.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fraunces-700.woff2") format("woff2"),
       url("../fonts/fraunces-700-ext.woff2") format("woff2");
}

/* Inter — grotesque neutro (corpo/nav/botões). Fallback: system-ui. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2"),
       url("../fonts/inter-400-ext.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2"),
       url("../fonts/inter-500-ext.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2"),
       url("../fonts/inter-600-ext.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2"),
       url("../fonts/inter-700-ext.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   2. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* --- Cor · vinho (primário e realces) — usar com PARCIMÔNIA --- */
  --color-vinho: #5E1622;        /* primário: CTAs, marca, destaques fortes  */
  --color-realce: #7A1F2B;       /* links / hover / estados ativos           */
  --color-detalhe: #8C2F3D;      /* detalhe: filetes, ícones, acentos leves  */

  /* --- Cor · superfícies (claro editorial) --- */
  --bg-paper: #FAF7F2;           /* fundo papel (off-white quente) — base    */
  --bg-alt: #F2ECE3;             /* seção alternada                          */
  --color-card: #FFFFFF;         /* cards / superfícies elevadas             */
  --color-border: #E4DCD0;       /* linhas / bordas / divisores              */

  /* --- Cor · texto --- */
  --color-ink: #171412;          /* tinta: texto principal / títulos         */
  --color-muted: #6B625B;        /* texto secundário / legendas              */

  /* --- Aliases semânticos (conveniência para as páginas) --- */
  --color-bg: var(--bg-paper);
  --color-text: var(--color-ink);
  --color-link: var(--color-realce);
  --color-primary: var(--color-vinho);
  --color-on-primary: #FAF7F2;   /* texto sobre fundo vinho                  */

  /* --- Tipografia · famílias --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Tipografia · pesos --- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Tipografia · escala (type scale ~1.25 major third) --- */
  --fs-xs: 0.75rem;    /* 12px — labels, kicker, meta            */
  --fs-sm: 0.875rem;   /* 14px — legendas, nav                   */
  --fs-base: 1rem;     /* 16px — corpo                           */
  --fs-md: 1.125rem;   /* 18px — corpo destacado / lead curto    */
  --fs-lg: 1.375rem;   /* 22px — subtítulos                      */
  --fs-xl: 1.75rem;    /* 28px — h3                              */
  --fs-2xl: 2.25rem;   /* 36px — h2                              */
  --fs-3xl: 3rem;      /* 48px — h1                              */
  --fs-4xl: 4rem;      /* 64px — hero display                    */

  /* --- Tipografia · line-height + tracking --- */
  --lh-tight: 1.1;     /* display                                */
  --lh-snug: 1.25;     /* títulos                                */
  --lh-normal: 1.6;    /* corpo                                  */
  --tracking-tight: -0.02em;   /* títulos serif grandes          */
  --tracking-normal: 0;
  --tracking-wide: 0.14em;     /* kicker / label caixa alta      */

  /* --- Espaçamento (escala base 4px) --- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px — respiro entre seções (muito espaço negativo) */

  /* --- Layout --- */
  --container-max: 1200px;      /* largura máxima do conteúdo             */
  --container-narrow: 720px;    /* coluna de leitura editorial (blog)     */
  --container-pad: 1.5rem;      /* respiro lateral (mobile)               */

  /* --- Raios / bordas / sombras (sóbrio, discreto) --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --border-hair: 1px solid var(--color-border);
  --shadow-soft: 0 1px 2px rgba(23, 20, 18, 0.04), 0 8px 24px rgba(23, 20, 18, 0.05);
  --shadow-card: 0 1px 3px rgba(23, 20, 18, 0.05), 0 12px 32px rgba(23, 20, 18, 0.06);

  /* --- Transições --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}