/* =============================================================
   PocketVibes — Design System
   Tokens · Reset · Typography · Base overrides
   ============================================================= */

/* --- Design Tokens --- */
:root {
	/* Backgrounds (lightest → most elevated/shaded) */
	--pv-bg-0: #FFFFFF;
	--pv-bg-1: #F8F9FA;
	--pv-bg-2: #F1F3F5;
	--pv-bg-3: #E9ECEF;

	/* Accent — mint deepened for light-bg contrast */
	--pv-mint:     #00A872;
	--pv-mint-rgb: 0, 168, 114;
	--pv-mint-dim: rgba(0, 168, 114, 0.08);
	--pv-mint-glow: 0 0 24px rgba(0, 168, 114, 0.22);

	/* Text */
	--pv-text-1: #0F1523;
	--pv-text-2: #3D4A5C;
	--pv-text-3: #8A95A8;

	/* Glass surfaces — light version */
	--pv-glass-bg:     rgba(255, 255, 255, 0.80);
	--pv-glass-border: rgba(0, 0, 0, 0.06);
	--pv-glass-blur:   blur(20px);
	--pv-glass-sat:    saturate(140%);

	/* Borders */
	--pv-border:        rgba(0, 0, 0, 0.08);
	--pv-border-active: rgba(0, 168, 114, 0.40);

	/* Typography */
	--pv-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
	--pv-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

	/* Radius */
	--pv-r-xs: 6px;
	--pv-r-sm: 8px;
	--pv-r-md: 14px;
	--pv-r-lg: 20px;
	--pv-r-xl: 28px;

	/* Spacing */
	--pv-gap:    16px;
	--pv-gap-lg: 24px;

	/* Motion */
	--pv-ease:   cubic-bezier(0.4, 0, 0.2, 1);
	--pv-t-fast: 0.15s;
	--pv-t-base: 0.2s;
	--pv-t-slow: 0.4s;

	/* Z-index layers */
	--pv-z-nav:   1000;
	--pv-z-modal: 2000;
	--pv-z-toast: 3000;
}

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Base --- */
html { scroll-behavior: smooth; }

body {
	background-color: var(--pv-bg-0) !important;
	color: var(--pv-text-1);
	font-family: var(--pv-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Reserve bottom space for mobile nav */
@media (max-width: 1024px) {
	body { padding-bottom: 72px !important; }
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
	color: var(--pv-text-1);
	font-family: var(--pv-font-sans);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }

p { color: var(--pv-text-2); line-height: 1.7; }

a { color: var(--pv-mint); transition: opacity var(--pv-t-base) var(--pv-ease); }
a:hover { opacity: 0.75; }

code, pre, .pv-mono { font-family: var(--pv-font-mono); }

/* --- Neutralise Astra's conflicting backgrounds --- */
#page,
.site-content,
.ast-container {
	background: transparent !important;
}

.page .entry-content,
.ast-page-builder-template .entry-content,
.woocommerce-page .entry-content {
	background: transparent !important;
	padding: 0 !important;
}

/* --- Custom scrollbar --- */
::-webkit-scrollbar            { width: 5px; height: 5px; }
::-webkit-scrollbar-track      { background: var(--pv-bg-1); }
::-webkit-scrollbar-thumb      { background: var(--pv-bg-3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover{ background: var(--pv-text-3); }

/* --- Selection --- */
::selection {
	background: rgba(var(--pv-mint-rgb), 0.15);
	color: var(--pv-text-1);
}

/* --- Focus ring --- */
:focus-visible {
	outline: 2px solid var(--pv-mint);
	outline-offset: 3px;
	border-radius: var(--pv-r-xs);
}