/**
 * Place Oversea — design tokens (fonte única de verdade).
 * Cores, tipografia, sombras, raios, espaçamento, breakpoints, animações.
 */

:root {
	/* Cores — identidade */
	--po-primary: #0f4c81;
	--po-primary-dark: #0c3d66;
	--po-primary-soft: rgba(15, 76, 129, 0.08);
	--po-accent: #ffde21;
	--po-accent-dark: #e6c81e;
	--po-white: #ffffff;
	--po-surface: #f8f9fa;
	--po-border: #e9ecef;
	--po-muted-border: #ced4da;
	--po-text: #212529;
	--po-muted: #6c757d;

	/* Aliases legados (compatibilidade com CSS existente) */
	--po-blue: var(--po-primary);
	--po-blue-dark: var(--po-primary-dark);
	--po-blue-soft: var(--po-primary-soft);
	--po-yellow: var(--po-accent);
	--po-yellow-dark: var(--po-accent-dark);
	--po-dark: var(--po-text);
	--po-bg: var(--po-white);
	--po-card-bg: linear-gradient(180deg, var(--po-surface) 0%, var(--po-border) 100%);

	/* Tipografia */
	--po-font-family: Inter, sans-serif;
	--po-font-weight-normal: 400;
	--po-font-weight-medium: 500;
	--po-font-weight-semibold: 600;
	--po-font-weight-bold: 700;
	--po-line-height-body: 1.75;
	--po-line-height-heading: 1.25;
	--po-line-height-tight: 1.15;
	--po-font-size-body: clamp(0.95rem, 1.1vw, 1.05rem);
	--po-font-size-h1: clamp(1.75rem, 3.5vw, 2.5rem);
	--po-font-size-h2: clamp(1.35rem, 2.4vw, 1.85rem);
	--po-font-size-h3: clamp(1.1rem, 1.8vw, 1.35rem);
	--po-font-size-kicker: 0.7rem;
	--po-section-title-size: clamp(1.55rem, 2.6vw, 2.15rem);
	--po-subtitle-size: clamp(16px, 1.8vw, 18px);
	--po-subtitle-line-height: 1.6;
	--po-card-title-size: clamp(1rem, 1.2vw, 1.08rem);
	--po-carousel-card-title-size: 16px;
	--po-carousel-label-size: 14px;
	--po-carousel-rating-size: clamp(14px, 1.5vw, 16px);

	/* Layout */
	--po-site-max: 1180px;
	--po-site-pad: clamp(16px, 4vw, 40px);
	--po-section-gap: clamp(48px, 6vw, 80px);
	/* Espaçamento horizontal uniforme entre quadros/cartões na homepage */
	--po-frame-gap-x: 24px;
	/* Colunas editoriais (hero proprietário) — alinhado ao gap dos cartões */
	--po-hero-col-gap: var(--po-frame-gap-x);
	--po-section-y: var(--po-section-gap);
	--po-section-y-tight: var(--po-section-gap);
	--po-header-util-size: 28px;
	--po-header-height: 85px;

	/* Espaçamento */
	--po-space-xs: 4px;
	--po-space-sm: 8px;
	--po-space-md: 16px;
	--po-space-lg: 24px;
	--po-space-xl: 40px;
	--po-space-2xl: 64px;

	/* Raios */
	--po-radius-sm: 8px;
	--po-radius-md: 12px;
	--po-radius-lg: 16px;
	--po-radius-xl: 20px;
	--po-radius-pill: 999px;

	/* Sombras */
	--po-shadow-soft: 0 8px 32px rgba(15, 76, 129, 0.08);
	--po-shadow-md: 0 12px 32px rgba(15, 76, 129, 0.12);
	--po-shadow-accent: 0 8px 20px rgba(255, 222, 33, 0.35);
	--po-shadow-accent-hover: 0 12px 24px rgba(255, 222, 33, 0.42);

	/* Breakpoints (referência — media queries usam valores literais) */
	--po-bp-sm: 576px;
	--po-bp-md: 768px;
	--po-bp-lg: 1024px;
	--po-bp-xl: 1280px;

	/* Animações */
	--po-transition-fast: 0.2s ease;
	--po-transition-base: 0.25s ease;
	--po-transition-slow: 0.5s ease;
	--po-reveal-offset: 18px;
	--po-reveal-duration: 0.5s;

	/* Ícones Lucide */
	--po-icon-size-sm: 16px;
	--po-icon-size-md: 20px;
	--po-icon-size-lg: 24px;
	--po-icon-stroke: 2;
}

/* Tokens ativos no site público */
body.po-site,
body.placeoversea-responsive {
	font-family: var(--po-font-family);
	color: var(--po-text);
	background-color: var(--po-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Property pages — overrides de layout (mantém tokens globais) */
body.po-property-has-detail {
	--po-site-max: 1240px;
	--po-aside-width: 400px;
	--po-layout-gap: clamp(40px, 6vw, 80px);
	--po-booking-sticky-top: clamp(20px, 2.5vw, 32px);
}