/**
 * SnapLap design tokens (Figma Make handoff baseline).
 * Loaded after snap.css — override legacy values via these custom properties.
 */
:root {
	/* Color */
	--snap-color-bg: #ffffff;
	--snap-color-surface: #f5f5f7;
	--snap-color-text: #1a1a1a;
	--snap-color-text-muted: #5c5c5c;
	--snap-color-accent: #c41e3a;
	--snap-color-accent-hover: #9e1830;
	--snap-color-border: #e0e0e0;
	--snap-color-nav-bg: #0d0d0d;

	/* Typography (scale; map Figma text styles here) */
	--snap-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--snap-font-size-sm: 0.875rem;
	--snap-font-size-base: 1rem;
	--snap-font-size-lg: 1.25rem;
	--snap-font-size-xl: 1.5rem;
	--snap-font-size-2xl: 2rem;
	--snap-line-tight: 1.25;
	--snap-line-normal: 1.5;

	/* Spacing */
	--snap-space-1: 0.25rem;
	--snap-space-2: 0.5rem;
	--snap-space-3: 1rem;
	--snap-space-4: 1.5rem;
	--snap-space-5: 2.5rem;
	--snap-space-6: 4rem;

	/* Layout */
	--snap-container-max: 1200px;
	--snap-radius-sm: 4px;
	--snap-radius-md: 8px;
	--snap-shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06);

	/* Breakpoints (for reference; use in @media below) */
	/* --snap-bp-sm: 480px; --snap-bp-md: 768px; --snap-bp-lg: 1024px; */
}

#snaplap {
	font-family: var(--snap-font-sans);
	color: var(--snap-color-text);
	background-color: var(--snap-color-bg);
	-webkit-font-smoothing: antialiased;
}

/* Header / main shell */
#snaplap #top-nav {
	box-shadow: var(--snap-shadow-header);
	border-bottom: 1px solid var(--snap-color-border);
}

#snaplap #header .header_top {
	padding-top: var(--snap-space-3);
	padding-bottom: var(--snap-space-3);
}

/* Home / magazine listing rhythm */
#snaplap .tv-list.fetured-magazines-snap h2,
#snaplap #core .tv-list h2 {
	font-size: var(--snap-font-size-2xl);
	line-height: var(--snap-line-tight);
	margin: var(--snap-space-5) 0 var(--snap-space-3);
	font-weight: 700;
	letter-spacing: -0.02em;
}

#snaplap .snap-left-working-area #content {
	max-width: var(--snap-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--snap-space-3);
	padding-right: var(--snap-space-3);
	box-sizing: border-box;
}

@media (max-width: 768px) {
	#snaplap .snap-left-working-area #content {
		padding-left: var(--snap-space-2);
		padding-right: var(--snap-space-2);
	}
}