/*
Theme Name: Cafezall
Theme URI: https://cafezall.com
Description: Tema do Cafezall — guia de cafés especiais. Child theme do GeneratePress otimizado para descoberta geográfica, monetização AdSense e experiência mobile-first.
Author: Cafezall
Author URI: https://cafezall.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cafezall
Tags: business, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =====================================================
   1. DESIGN TOKENS — CSS Variables
   Toda a identidade visual do Cafezall vem destas variáveis.
   Para ajustar cores ou espaçamentos no tema inteiro, edite aqui.
   ===================================================== */

:root {
	/* ---- Brand: Verde mata (cor primária) ---- */
	--cz-green-50:  #E8EFEB;
	--cz-green-100: #C2D4CB;
	--cz-green-300: #7FA391;
	--cz-green-500: #3D6E58;
	--cz-green-700: #244D3A;
	--cz-green-800: #163525; /* cor oficial da marca */
	--cz-green-900: #0B1F15;

	/* ---- Brand: Laranja crema (cor de destaque) ---- */
	--cz-orange-50:  #FBF1E5;
	--cz-orange-100: #F4D9B8;
	--cz-orange-300: #E8B073;
	--cz-orange-500: #D58432; /* cor oficial da marca */
	--cz-orange-700: #A86620;
	--cz-orange-800: #7A4915;
	--cz-orange-900: #4D2E0D;

	/* ---- Neutros quentes (papéis e texto) ---- */
	--cz-neutral-50:  #FDFBF7;
	--cz-neutral-100: #F6F1E8;
	--cz-neutral-200: #E8E0CC;
	--cz-neutral-300: #C9BFA6;
	--cz-neutral-500: #7A7460;
	--cz-neutral-700: #3D3A30;
	--cz-neutral-900: #1F1D17;

	/* ---- Funcionais (azul somente para "você está aqui" no mapa) ---- */
	--cz-blue-marker: #1565D8;

	/* ---- Roles semânticos ---- */
	--cz-bg-page:        var(--cz-neutral-50);
	--cz-bg-surface:     #FFFFFF;
	--cz-bg-muted:       var(--cz-neutral-100);
	--cz-bg-inverse:     var(--cz-green-800);

	--cz-text-primary:   var(--cz-green-800);
	--cz-text-secondary: var(--cz-neutral-500);
	--cz-text-tertiary:  var(--cz-neutral-300);
	--cz-text-on-dark:   var(--cz-neutral-50);
	--cz-text-on-orange: var(--cz-orange-800);
	--cz-text-link:      var(--cz-orange-700);

	--cz-border-subtle:  var(--cz-neutral-200);
	--cz-border-strong:  var(--cz-green-800);

	--cz-accent:         var(--cz-orange-500);
	--cz-accent-hover:   var(--cz-orange-700);

	--cz-success:        var(--cz-green-700);
	--cz-warning:        var(--cz-orange-700);
	--cz-danger:         #A32D2D;

	/* ---- Tipografia ---- */
	--cz-font-sans: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cz-font-serif: 'Roboto Slab', Georgia, 'Times New Roman', serif;

	--cz-text-xs:   12px;
	--cz-text-sm:   13px;
	--cz-text-base: 15px;
	--cz-text-md:   17px;
	--cz-text-lg:   20px;
	--cz-text-xl:   24px;
	--cz-text-2xl:  30px;
	--cz-text-3xl:  36px;

	--cz-leading-tight:  1.2;
	--cz-leading-normal: 1.55;
	--cz-leading-relaxed: 1.75;

	--cz-weight-regular: 400;
	--cz-weight-medium:  500;
	--cz-weight-bold:    600;

	/* ---- Espaçamento (sistema 4px) ---- */
	--cz-space-1: 4px;
	--cz-space-2: 8px;
	--cz-space-3: 12px;
	--cz-space-4: 16px;
	--cz-space-5: 20px;
	--cz-space-6: 24px;
	--cz-space-8: 32px;
	--cz-space-10: 40px;
	--cz-space-12: 48px;
	--cz-space-16: 64px;

	/* ---- Border radius ---- */
	--cz-radius-sm: 6px;
	--cz-radius-md: 8px;
	--cz-radius-lg: 10px;
	--cz-radius-xl: 12px;
	--cz-radius-2xl: 16px;
	--cz-radius-pill: 999px;

	/* ---- Container ---- */
	--cz-container-max: 1200px;
	--cz-container-narrow: 720px;

	/* ---- Z-index ---- */
	--cz-z-bottom-nav:   100;
	--cz-z-sticky:       200;
	--cz-z-overlay:      300;
	--cz-z-bottom-sheet: 400;
	--cz-z-modal:        500;

	/* ---- Transitions ---- */
	--cz-transition-fast: 150ms ease;
	--cz-transition-base: 250ms ease;

	/* ---- Reservas de altura para ad slots (evita CLS) ---- */
	--cz-ad-leaderboard-h: 90px;
	--cz-ad-incontent-h:   100px;
	--cz-ad-sidebar-h:     600px;
	--cz-ad-infeed-h:      88px;
}

/* =====================================================
   2. DARK MODE — auto via prefers-color-scheme
   ===================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--cz-bg-page:        var(--cz-green-900);
		--cz-bg-surface:     var(--cz-green-800);
		--cz-bg-muted:       var(--cz-green-700);
		--cz-bg-inverse:     var(--cz-neutral-50);

		--cz-text-primary:   var(--cz-neutral-50);
		--cz-text-secondary: var(--cz-neutral-300);
		--cz-text-tertiary:  var(--cz-neutral-500);
		--cz-text-on-dark:   var(--cz-neutral-50);

		--cz-border-subtle:  rgba(201, 191, 166, 0.15);
		--cz-border-strong:  var(--cz-orange-300);

		--cz-accent:         var(--cz-orange-300);
		--cz-accent-hover:   var(--cz-orange-100);
	}
}

/* Permite override manual via [data-theme="light"] ou [data-theme="dark"] no <html> */
[data-theme="light"] {
	color-scheme: light;
}
[data-theme="dark"] {
	color-scheme: dark;
	--cz-bg-page:        var(--cz-green-900);
	--cz-bg-surface:     var(--cz-green-800);
	--cz-bg-muted:       var(--cz-green-700);
	--cz-text-primary:   var(--cz-neutral-50);
	--cz-text-secondary: var(--cz-neutral-300);
	--cz-border-subtle:  rgba(201, 191, 166, 0.15);
	--cz-accent:         var(--cz-orange-300);
}

/* =====================================================
   3. BASE — reset leve e tipografia raiz
   ===================================================== */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--cz-font-sans);
	font-size: var(--cz-text-base);
	line-height: var(--cz-leading-normal);
	color: var(--cz-text-primary);
	background-color: var(--cz-bg-page);
	font-weight: var(--cz-weight-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.cz-serif {
	font-family: var(--cz-font-serif);
	font-weight: var(--cz-weight-medium);
	line-height: var(--cz-leading-tight);
	letter-spacing: -0.01em;
	color: var(--cz-text-primary);
}

h1 { font-size: var(--cz-text-3xl); }
h2 { font-size: var(--cz-text-2xl); }
h3 { font-size: var(--cz-text-xl); }
h4 { font-size: var(--cz-text-lg); }
h5 { font-size: var(--cz-text-md); }
h6 { font-size: var(--cz-text-base); }

@media (max-width: 768px) {
	h1 { font-size: var(--cz-text-2xl); }
	h2 { font-size: var(--cz-text-xl); }
	h3 { font-size: var(--cz-text-lg); }
}

a {
	color: var(--cz-text-link);
	text-decoration: none;
	transition: color var(--cz-transition-fast);
}

a:hover,
a:focus {
	color: var(--cz-accent-hover);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Sora variável: pesos disponíveis 400 e 500 apenas (performance) */
.cz-medium { font-weight: var(--cz-weight-medium); }
.cz-bold   { font-weight: var(--cz-weight-bold); }

/* =====================================================
   4. FOCUS — acessibilidade
   ===================================================== */

*:focus-visible {
	outline: 2px solid var(--cz-accent);
	outline-offset: 2px;
	border-radius: var(--cz-radius-sm);
}

/* =====================================================
   5. HELPERS — utilidades comuns
   ===================================================== */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cz-container {
	width: 100%;
	max-width: var(--cz-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--cz-space-5);
	padding-right: var(--cz-space-5);
}

@media (min-width: 768px) {
	.cz-container {
		padding-left: var(--cz-space-8);
		padding-right: var(--cz-space-8);
	}
}

.cz-container-narrow {
	max-width: var(--cz-container-narrow);
}

/* =====================================================
   FIM — estilos customizados em assets/css/cafezall.css
   ===================================================== */