/*
Theme Name: CouponBlog Pro
Theme URI: https://blazelogix.com/themes/couponblog-pro
Author: Blazelogix
Author URI: https://blazelogix.com
Description: A premium affiliate deals + editorial blog theme. Built-in coupon system (custom post type, stores, categories, reveal-and-copy codes), four switchable homepage styles, dark/light mode, AJAX filtering and load-more, schema.org markup, and a token-based design system.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: couponblog-pro
Tags: blog, news, e-commerce, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
	/* Typography */
	--font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	/* Type scale */
	--fs-xs: 0.75rem;    /* 12 */
	--fs-sm: 0.875rem;   /* 14 */
	--fs-base: 1rem;     /* 16 */
	--fs-md: 1.125rem;   /* 18 */
	--fs-lg: 1.5rem;     /* 24 */
	--fs-xl: 2rem;       /* 32 */
	--fs-2xl: 3rem;      /* 48 */
	--fs-3xl: 4rem;      /* 64 */

	/* Spacing (4px base) */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-24: 96px;

	/* Radii */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 20px;
	--r-full: 999px;

	/* Shadows (layered, subtle) */
	--shadow-sm: 0 1px 2px rgba(16, 18, 24, 0.05), 0 1px 3px rgba(16, 18, 24, 0.06);
	--shadow-md: 0 2px 4px rgba(16, 18, 24, 0.05), 0 6px 16px rgba(16, 18, 24, 0.08);
	--shadow-lg: 0 4px 8px rgba(16, 18, 24, 0.06), 0 16px 40px rgba(16, 18, 24, 0.12);

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--speed: 0.22s;

	/* Layout */
	--container: 1240px;
	--container-narrow: 760px;

	/* Semantic colors — LIGHT "Emerald & Gold" (soft ivory, not harsh white) */
	--bg: #f7f8f5;
	--bg-elevated: #ffffff;
	--surface: #ffffff;
	--text: #14201a;
	--text-muted: #5e6d64;
	--border: #e2e7e0;
	--accent: #0c9b6a;
	--accent-hover: #0a8158;
	--accent-soft: rgba(12, 155, 106, 0.10);
	--accent-2: #f2a915;
	--accent-2-soft: rgba(242, 169, 21, 0.14);
	--success: #0f9d6c;
	--success-soft: rgba(15, 157, 108, 0.12);
	--danger: #e5484d;
	--danger-soft: rgba(229, 72, 77, 0.12);
	--code-bg: #eef1ec;
	--header-bg: rgba(247, 248, 245, 0.85);
}

html[data-theme='dark'] {
	/* Semantic colors — DARK (deep green-charcoal, not pure black) */
	--bg: #111714;
	--bg-elevated: #171f1b;
	--surface: #1c2621;
	--text: #e7ece9;
	--text-muted: #94a39b;
	--border: #2a352f;
	--accent: #2ec98c;
	--accent-hover: #4bdba2;
	--accent-soft: rgba(46, 201, 140, 0.13);
	--accent-2: #ffb547;
	--accent-2-soft: rgba(255, 181, 71, 0.15);
	--success: #2fbd85;
	--success-soft: rgba(47, 189, 133, 0.16);
	--danger: #f06a6e;
	--danger-soft: rgba(240, 106, 110, 0.16);
	--code-bg: #0e1411;
	--header-bg: rgba(17, 23, 20, 0.85);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.55);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-ui);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 var(--sp-4);
	color: var(--text);
	overflow-wrap: break-word;
}

h1 { font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); }
h2 { font-size: clamp(var(--fs-lg), 3vw, var(--fs-xl)); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p {
	margin: 0 0 var(--sp-4);
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

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

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

::selection {
	background: var(--accent);
	color: #fff;
}

button {
	font-family: var(--font-ui);
	cursor: pointer;
}

input,
textarea,
select {
	font-family: var(--font-ui);
	font-size: var(--fs-base);
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	padding: var(--sp-3) var(--sp-4);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Accessibility helpers */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: var(--sp-4);
	top: -100px;
	z-index: 10000;
	background: var(--accent);
	color: #fff;
	padding: var(--sp-3) var(--sp-6);
	border-radius: var(--r-sm);
	transition: top var(--speed) var(--ease);
}

.skip-link:focus {
	top: var(--sp-4);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}