/* =============================================================================
   KEY POINT LEGAL — DESIGN SYSTEM & COMPONENT STYLES
   ============================================================================= */

/* Layer order: low → high specificity. Unlayered styles always win. */
@layer base, layout, components;

@layer base {
	/* =============================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================================= */
	:root {
		/* --- Color Palette --- */
		--navy: #0f1e3d;
		--navy-mid: #1a2f5a;
		--navy-light: #243b6a;
		--gold: #c9a84c;
		--gold-light: #e4c76b;
		--gold-dark: #806b2c;
		--cream: #f8f6f0;
		--cream-dark: #ede9df;
		--white: #ffffff;
		--text-dark: #1a1a2e;
		--text-mid: #4a4a5a;
		--text-light: #8a8a9a;
		--green: #267b4d;
		--green-light: #2d8b57;
		--red-accent: #c44536;

		/* --- Color Namespace Aliases (--color-* semantic tokens) --- */
		--color-bg:           var(--cream);           /* #f8f6f0 — основний фон */
		--color-surface:      var(--cream-dark);      /* #ede9df — карти, секції */
		--color-surface-2:    var(--white);           /* #ffffff — форми, sidebar */
		--color-text:         var(--text-dark);       /* #1a1a2e — основний текст */
		--color-text-muted:   var(--text-mid);        /* #4a4a5a — підписи, metadata */
		--color-primary:      var(--green);           /* #267b4d — акцент, CTA */
		--color-primary-hover: var(--green-light);   /* #2d8b57 — hover стан */
		--color-divider:      var(--border-light);    /* rgba(0,0,0,0.06) — лінії, рамки */
		--color-dark-section: var(--navy);            /* #0f1e3d — темні секції */

		/* --- Typography --- */
		--font-display: 'Cormorant Garamond', Georgia, serif;
		--font-body: 'DM Sans', system-ui, sans-serif;

		/* --- Easing --- */
		--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
		--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

		/* --- Navigation tokens (used by GB inline CSS in section-header.html) --- */
		--contrast: #1a1a2e;
		--accent: #c9a84c;
		--base-2: rgba(201, 168, 76, 0.08);

		/* --- Z-index layers --- */
		--z-header: 1000;
		/* --z-mobile-nav removed — mobile menu handled by mobile-menu/ module */
		--z-floating-cta: 999;

		/* --- RGB component tokens (for rgba() composition) --- */
		--gold-rgb: 201, 168, 76;
		--navy-rgb: 15, 30, 61;
		--green-light-rgb: 45, 139, 87;

		/* --- Repeated RGBA tokens --- */
		--border-light: rgba(0, 0, 0, 0.06);
		--border-medium: rgba(0, 0, 0, 0.1);
		--shadow-black-10: rgba(0, 0, 0, 0.1);
		--gold-15: rgba(201, 168, 76, 0.15);
		--gold-20: rgba(201, 168, 76, 0.2);
		--gold-30: rgba(201, 168, 76, 0.3);
		--white-50: rgba(255, 255, 255, 0.5);
		--white-75: rgba(255, 255, 255, 0.75);

		/* --- Shadow patterns --- */
		--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
		--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
		--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);
		--shadow-elevated:
			0 8px 16px rgba(0, 0, 0, 0.04), 0 20px 50px var(--border-medium);

		/* --- Font weights (blog / article modules) --- */
		--font-medium: 500;
		--font-semibold: 600;
		--font-bold: 700;
		--font-extrabold: 800;

		/* --- Line heights (blog / article modules) --- */
		--leading-tight: 1.25;
		--leading-normal: 1.5;
		--leading-relaxed: 1.7;

		/* --- Text aliases (blog-single.css compatibility) --- */
		--text-primary: var(--text-dark);
		--text-secondary: var(--text-mid);
		--text-muted: var(--text-light);
		--border-color: rgba(0, 0, 0, 0.1);
		--bg-card: var(--white);
		--accent-2: var(--navy-mid);
		--color-amber: #f59e0b;

		/* --- Spacing scale (4px grid) --- */
		--space-1: 4px;
		--space-2: 8px;
		--space-3: 12px;
		--space-4: 16px;
		--space-5: 24px;

		/* --- Typography scale --- */
		--text-xs: 0.75rem;
		--text-sm: 0.875rem;
		--text-base: 1rem;

		/* --- Radius --- */
		--radius-md: 8px;

		/* --- Interactive transitions --- */
		--transition-interactive: 0.2s ease;
	}

	/* =============================================================================
   2. RESET & BASE
   ============================================================================= */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Scoped reset: only zero-out margin/padding within the theme container.
   This prevents breaking WP admin, GP core elements, and third-party plugins. */
	.adv-theme *,
	.adv-theme *::before,
	.adv-theme *::after {
		margin: 0;
		padding: 0;
	}

	html {
		scroll-behavior: smooth;
		font-size: 16px;
		overflow-x: hidden;
		/* iOS Safari статус-бар підхоплює background-color <html>.
	   Navy = колір хедера → статус-бар стає темно-синім. */
		background-color: #0f1e3d;
	}

	@media (min-width: 769px) {
		html {
			scrollbar-gutter: stable;
		}
	}

	body {
		font-family: var(--font-body);
		color: var(--text-dark);
		background: var(--cream);
		overflow-x: hidden;
		line-height: 1.65;
		-webkit-font-smoothing: antialiased;
	}

	/* =============================================================================
   3. PAGE SYSTEM (REMOVED for WordPress compatibility)
   ============================================================================= */
	/* Intentionally removed:
.page { display:none; }
.page.active { display:block; }
*/
} /* end @layer base */