/* ==========================================================================
   Riscalo — brand.css
   Ponte entre o motor Blocksy e o look & feel Riscalo.

   Remapeia as variaveis de design do Blocksy (--theme-palette-color-*,
   tipografia, links, botoes, bordas) para os tokens da marca (--lil-*, def. em
   style.css). Assim TUDO o que o Blocksy renderiza (loja, produto, carrinho,
   checkout, conta, blocos) adota a paleta linho/terracota e as fontes locais
   Fraunces/Mulish, sem editar o tema-pai. Carregado por ULTIMO (ver enqueue.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Paleta global do Blocksy -> tokens Riscalo
   O Blocksy expoe 8 cores de paleta usadas em todo o tema. Remapeamo-las:
   1 = acento (terracota) · 2 = acento hover · 3 = titulos/tinta ·
   4 = corpo · 5 = borda · 6 = linho (fundo) · 7 = branco quente · 8 = branco.
   -------------------------------------------------------------------------- */
:root,
body,
.ct-container,
[data-theme] {
	--theme-palette-color-1: #C2615A; /* terracota — acento/acoes */
	--theme-palette-color-2: #A94E47; /* terracota escuro — hover */
	--theme-palette-color-3: #2A2724; /* tinta — titulos / texto forte */
	--theme-palette-color-4: #5C564E; /* texto suave — corpo */
	--theme-palette-color-5: #E0D6C6; /* borda */
	--theme-palette-color-6: #F4EFE6; /* linho — fundo de seccao */
	--theme-palette-color-7: #FBF9F5; /* branco quente — superficies */
	--theme-palette-color-8: #FFFFFF; /* branco */

	/* Tokens semanticos do Blocksy */
	--theme-link-color: var(--lil-terracota);
	--theme-link-hover-color: var(--lil-terracota-escuro);
	--theme-text-color: var(--lil-tinta);
	--theme-headings-color: var(--lil-tinta);
	--theme-border-color: var(--lil-border);
	--theme-content-spacing: 1.5rem;
	--theme-content-vertical-spacing: 1.5rem;

	/* Botoes do Blocksy */
	--theme-button-background-initial-color: var(--lil-terracota);
	--theme-button-background-hover-color: var(--lil-terracota-escuro);
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;

	/* Tipografia: corpo Mulish, titulos Fraunces (fontes LOCAIS, RGPD) */
	--theme-font-family: var(--lil-font-corpo);
	--theme-normal-font-family: var(--lil-font-corpo);
	--theme-headings-font-family: var(--lil-font-titulo);

	/* Largura do container alinhada com o design */
	--theme-normal-container-max-width: var(--lil-largura);
	--theme-content-width: var(--lil-largura);
}

/* --------------------------------------------------------------------------
   2. Base: fundo linho, texto tinta, corpo Mulish
   -------------------------------------------------------------------------- */
body {
	background-color: var(--lil-bg);
	color: var(--lil-text);
	font-family: var(--lil-font-corpo);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ct-dynamic-data,
.woocommerce-loop-product__title,
.product_title,
.wp-block-heading {
	font-family: var(--lil-font-titulo);
	color: var(--lil-tinta);
	font-weight: var(--lil-peso-medio);
}

a {
	color: var(--lil-link);
}

a:hover,
a:focus {
	color: var(--lil-link-hover);
}

/* Conteudo de paginas/posts servido pelo Blocksy: largura de leitura serena */
.entry-content,
.ct-container .entry-content {
	font-size: var(--lil-fs-base);
	line-height: 1.7;
	color: var(--lil-text-soft);
}

/* --------------------------------------------------------------------------
   3. Botoes (Blocksy + blocos Gutenberg) -> botao da marca (terracota)
   Os botoes WooCommerce sao tratados em woocommerce.css.
   -------------------------------------------------------------------------- */
.ct-button,
.wp-block-button__link,
button.wp-element-button,
.wp-block-search__button,
input[type="submit"]:not(.woocommerce *) {
	background-color: var(--lil-terracota);
	color: #ffffff;
	border: 1px solid transparent;
	border-radius: var(--lil-radio-btn);
	font-family: var(--lil-font-corpo);
	font-weight: var(--lil-peso-medio);
	letter-spacing: var(--lil-ls-btn);
	text-transform: uppercase;
	transition: background-color var(--lil-transicao), color var(--lil-transicao);
}

.ct-button:hover,
.wp-block-button__link:hover,
button.wp-element-button:hover,
.wp-block-search__button:hover {
	background-color: var(--lil-terracota-escuro);
	color: #ffffff;
}

/* Variante "outline" do Gutenberg -> ghost da marca */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--lil-terracota);
	border-color: var(--lil-border-forte);
}

/* --------------------------------------------------------------------------
   4. WooCommerce servido pelo Blocksy (loja/produto/carrinho/checkout)
   Reforca a cor da marca nos pontos onde o Blocksy define cores proprias.
   O grosso da apresentacao Woo vive em woocommerce.css.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--lil-text-forte);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--lil-font-titulo);
	color: var(--lil-tinta);
}

.woocommerce .star-rating,
.woocommerce .woocommerce-product-rating .star-rating {
	color: var(--lil-terracota);
}

/* Preco/realce do Blocksy nos cartoes */
.ct-woocommerce-product-element .price,
.entry-summary .price {
	color: var(--lil-text-forte);
}

/* Badges "promocao" (onsale) na cor da marca */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background-color: var(--lil-salvia);
	color: #ffffff;
	border-radius: var(--lil-radio-pill);
}

/* --------------------------------------------------------------------------
   5. Higiene: ocultar barra de admin no topo do front-end nao e necessario;
   garantir que o conteudo do Blocksy nao impoe um fundo branco duro nas
   seccoes da marca (as nossas seccoes .lil-section--* definem o seu fundo).
   -------------------------------------------------------------------------- */
.lil-section {
	width: 100%;
}

/* Coerencia de foco com a marca */
:focus-visible {
	outline: 2px solid var(--lil-terracota);
	outline-offset: 2px;
}