/* ============================================================================
   FIO BRANCO — tokens e base
   ----------------------------------------------------------------------------
   Paleta amostrada do arquivo original do logo
   (uploads/2022/12/LOGO-VERS-01-2-2048x2048.jpg) em 27/08/2026:

     #F9CEBE  blush     — o campo do logo, 83% do lockup, e a fachada da loja
     #54261D  espresso  — o contorno do "Branco"; cor de ação da loja
     #989495  agulha    — a agulha que atravessa o lettering
     #FFFFFF  branco    — o script

   Os neutros são derivados desses valores (viés quente). Cor de produto
   (verde musgo, lavanda, marsala…) é sortimento, NÃO é cor de marca.

   Estes tokens espelham o kit global do Elementor. Ao alterar um, alterar o
   outro: Elementor › Configurações do site › Cores globais.
   ========================================================================== */

:root {
	/* ---- superfícies ---- */
	--fb-ground: #faf6f3;
	--fb-surface: #fff;
	--fb-surface-2: #f3e9e3;
	--fb-wash: #fdf3ee;

	/* ---- texto (espelham os slots do kit) ---- */
	--fb-ink: #17100e;      /* kit: Primário   — títulos */
	--fb-body: #3a312d;     /* kit: Texto      — corpo, 12,67:1 sobre branco */
	--fb-ink-2: #7a6660;    /* kit: Secundário — divisores e ícones */
	--fb-ink-3: #a2908a;

	/* ---- linhas ---- */
	--fb-seam: #ebdcd4;
	--fb-seam-strong: #d9c2b8;
	--fb-needle: #989495;

	/* ---- marca ---- */
	--fb-espresso: #54261d;
	--fb-espresso-hi: #6b3427;
	--fb-on-espresso: #fdf2ec;
	--fb-blush: #f9cebe;
	--fb-on-blush: #54261d;

	/* Terracota da identidade (Fio Branco OS). Usado na barra de avisos.
	   Branco em vez do creme: com 11px o texto pede margem — 5,70:1 contra
	   5,18:1. Não inverte no tema escuro: a faixa mantém a identidade, como
	   a barra preta da FIGS. */
	--fb-terracota: #9c532b;
	--fb-on-terracota: #fff;

	/* Terracota aprofundado, para o estado pressionado dos botões.
	   Não segue o padrão "-hi" (mais claro) do espresso: aquele salto de
	   luminância funciona num tom muito escuro, mas aplicado ao terracota
	   levaria o branco a 3,77:1 e o rótulo do "Finalizar" deixaria de passar.
	   Escurecendo, o branco fica em 7,85:1 e a diferença entre repouso e
	   pressionado continua perceptível (1,38:1 entre os dois). */
	--fb-terracota-strong: #7d4222;

	/* ---- tipografia ---- */
	--fb-font: "Inter", "Inter-fallback", system-ui, sans-serif;

	/* escala fluida: cresce com a viewport sem media query */
	--fb-text-xs: clamp(0.6875rem, 0.15dvw + 0.65rem, 0.75rem);
	--fb-text-sm: clamp(0.8125rem, 0.2dvw + 0.75rem, 0.875rem);
	--fb-text-base: 1rem;
	--fb-text-lg: clamp(1rem, 0.5dvw + 0.9rem, 1.125rem);
	--fb-text-xl: clamp(1.25rem, 1dvw + 1rem, 1.5rem);
	--fb-text-2xl: clamp(1.625rem, 2.5dvw + 0.75rem, 2.5rem);
	--fb-text-3xl: clamp(2.5rem, 5dvw + 1rem, 4.5rem);

	--fb-lh-tight: 1.05;
	--fb-lh-heading: 1.15;
	--fb-lh-body: 1.6;

	/* ---- espaçamento ---- */
	--fb-space-3xs: 0.25rem;
	--fb-space-2xs: 0.5rem;
	--fb-space-xs: 0.75rem;
	--fb-space-sm: 1rem;
	--fb-space-md: 1.5rem;
	--fb-space-lg: 2rem;
	--fb-space-xl: 3rem;
	--fb-space-2xl: clamp(3rem, 6dvw, 6rem);

	/* ---- outros ---- */
	--fb-radius: 0.1875rem;
	--fb-radius-pill: 62.4375rem;
	--fb-shadow-card: 0 0.75rem 2rem -1.125rem rgb(84 38 29 / 0.4);
	--fb-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* espelha a família no kit do Elementor, para os widgets herdarem */
	--e-global-typography-primary-font-family: var(--fb-font);
	--e-global-typography-secondary-font-family: var(--fb-font);
	--e-global-typography-text-font-family: var(--fb-font);
	--e-global-typography-accent-font-family: var(--fb-font);
}

/* Fallback com métricas ajustadas: enquanto a Inter carrega, o Arial local
   ocupa quase exatamente o mesmo espaço. Sem isso o texto "pula" na troca
   de fonte (CLS), que é penalizado no Core Web Vitals. */
@font-face {
	font-family: "Inter-fallback";
	src: local("Arial");
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22%;
	line-gap-override: 0%;
}

/* ----------------------------------------------------------------------------
   Base
   O kit global do Elementor cuida de cor e fonte da maior parte dos widgets.
   Aqui ficam só os ajustes que o kit não alcança.
   -------------------------------------------------------------------------- */

:where(h1, h2) {
	letter-spacing: -0.03em;
	text-wrap: balance;
}

:where(h3, h4) {
	letter-spacing: -0.02em;
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

/* O reset.css do Hello Elementor pinta todo botão de #c36 (magenta) no hover e
   no foco — cor de exemplo do tema, como a paleta padrão do Elementor que já
   trocamos.
   Aqui a pintura é ANULADA, não substituída: trocar a cor de fundo no :focus
   deixa o botão preso num estado escuro depois de qualquer clique, porque o
   foco permanece. Quem sinaliza foco é o anel abaixo.

   Vale para todo botão, inclusive os nossos: um componente que queira um
   estado aceso declara fundo e cor em :hover/:focus-visible e vence pela
   ordem (mesma especificidade, folha carregada depois). Quem tem fundo em
   repouso — .fb-buscar, .fb-busca-painel__fechar — repõe esse fundo num
   bloco &:focus próprio. */
:is(button, [type="button"], [type="submit"], [type="reset"]):is(:hover, :focus) {
	background-color: unset;
	border-color: unset;
	color: unset;
}

/* O tema pai também pinta TODO link de magenta (a { color: #c36 }), então
   qualquer link novo nasce magenta até alguém cobrir. O padrão da marca é
   herdar a cor do texto ao redor; destaque é decisão de cada componente. */
a {
	color: inherit;
}

/* Menos em texto corrido, onde o link precisa se distinguir sozinho. */
:is(.entry-content, .woocommerce-Tabs-panel, .woocommerce-product-details__short-description) a:not([class]) {
	color: var(--fb-espresso);
	text-decoration: underline;
	text-underline-offset: 0.15em;

	&:hover {
		color: var(--fb-terracota);
	}
}

/* Foco visível de verdade, só para quem navega por teclado. */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 0.125rem solid var(--fb-espresso);
	outline-offset: 0.125rem;
	border-radius: 0.125rem;
}

/* Preço e parcelamento alinhados em coluna. */
:is(.woocommerce-Price-amount, .woo-custom-installments-group .amount) {
	font-variant-numeric: tabular-nums;
}