/* ============================================================
   FFC Design System — tokens consolidados
   Origem: Claude Design (projeto "Redesign Home"), pasta
   _ds/ffc-design-system-.../tokens/*. Consolidado num só arquivo
   para enfileirar via wp_enqueue_style. NÃO editar valores à mão
   sem refletir no design system de origem.
   ============================================================ */

/* ---------- Webfont: Space Grotesk (variável 300–700) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2-variations"),
       url("../fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Cores ---------- */
  --ffc-black: #000000;
  --ffc-white: #ffffff;
  --ffc-near-black: #080808;
  --ffc-panel: #222222;
  --ffc-gray-900: #2f2f2f;
  --ffc-gray-600: #5c5c5c;
  --ffc-gray-500: #4b4b4b;
  --ffc-gray-300: #b0b0b0;

  --ffc-blue: #0529f6;
  --ffc-blue-pure: #0000ff;      /* legado — migrar para --ffc-blue */
  --ffc-indigo-soft: #9ba1e2;

  --ffc-hairline-on-dark: rgba(255, 255, 255, 0.16);
  --ffc-hairline-on-light: rgba(0, 0, 0, 0.12);

  /* aliases semânticos */
  --surface-base-dark: var(--ffc-black);
  --surface-base-light: var(--ffc-white);
  --surface-accent: var(--ffc-blue);
  --surface-card: var(--ffc-panel);
  --surface-card-deep: var(--ffc-near-black);
  --text-primary: var(--ffc-gray-900);
  --text-secondary: var(--ffc-gray-600);
  --text-muted: var(--ffc-gray-300);
  --text-on-dark: var(--ffc-white);
  --text-on-dark-secondary: var(--ffc-gray-300);
  --text-on-accent: var(--ffc-white);
  --accent: var(--ffc-blue);
  --accent-text: var(--ffc-blue);
  --accent-on: var(--ffc-white);
  --border-on-dark: var(--ffc-hairline-on-dark);
  --border-on-light: var(--ffc-hairline-on-light);
  --ffc-blue-on-dark: #6b80ff;   /* azul levemente clareado para hover sobre fundo escuro */

  /* ---------- Tipografia ---------- */
  --font-display: "Space Grotesk", "Archivo", "Inter", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --type-hero:     clamp(3.5rem, 12vw, 11rem);
  --type-display:  clamp(2.5rem, 6vw, 5rem);
  --type-title:    clamp(1.75rem, 3.2vw, 2.75rem);
  --type-subtitle: clamp(1.25rem, 2vw, 1.75rem);
  --type-lead:     1.375rem;
  --type-body:     1.0625rem;
  --type-small:    0.9375rem;
  --type-meta:     0.75rem;

  --lh-tight: 0.95;
  --lh-snug: 1.08;
  --lh-normal: 1.5;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-meta: 0.14em;

  /* ---------- Espaçamento ---------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --margin-canvas: 5%;
  --measure: 62ch;

  /* ---------- Efeitos: raios, bordas, sombras, motion ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-hairline-dark: 1px solid var(--border-on-dark);
  --border-hairline-light: 1px solid var(--border-on-light);

  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.28);
  --ring-accent: 0 0 0 3px rgba(5, 41, 246, 0.35);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ---------------------------------------------------------------------------
   Fontes de display, auto-hospedadas e servidas do próprio domínio, como a
   Space Grotesk: o site tem CSP em várias rotas e o CDN da Hostinger cacheia
   estático — terceiro host de fonte é request extra e ponto de falha à toa.
   Subconjunto `latin` (U+0000–00FF), que cobre todo o português.

   Vivem aqui, e não no CSS de uma página, porque @font-face é declaração
   global e mais de uma página do tema já usa esta família. Declarar não baixa:
   o browser só busca o arquivo se alguma regra aplicada usar a família, então
   as páginas que não usam não pagam nada.
   --------------------------------------------------------------------------- */
@font-face {
	font-family: "Anton";
	src: url("../fonts/Anton-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Caveat";
	src: url("../fonts/Caveat-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Mrs Saint Delafield";
	src: url("../fonts/MrsSaintDelafield-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}