/*
 * VPN Vezdehod (vzdhd) theme
 * Light theme matching vpnvezdehod.com main site
 * Fonts: Poppins (body), Roboto Slab (headings/logo)
 * Accent: #ff5722 (orange-red)
 */

:root {
	/* Typography */
	/* Poppins has no Cyrillic glyphs in the Google Fonts subsetting — Inter carries
	   the Cyrillic range at all weights (400/500/700) so mixed Latin+Cyrillic text
	   doesn't look uneven (Latin in Poppins 500, Cyrillic falling back to system
	   sans-serif 400). */
	--font-primary: 'Poppins', 'Inter', sans-serif;
	--font-heading: 'Roboto Slab', serif;

	/* Page background */
	--bg-page: #f0f0f0;

	/* Header */
	--bg-header: #ffffff;
	--shadow-header: 0 2px 4px rgba(0, 0, 0, 0.1);

	/* Main content areas */
	--bg-main: #ffffff;
	--bg-card: #fafafa;
	--shadow-card: 0 2px 4px rgba(0, 0, 0, 0.05);

	/* Text */
	--text-primary: #333333;
	--text-secondary: #666666;
	--text-heading: #2c3e50;
	--text-muted: #999999;

	/* Accent */
	--accent: #ff5722;
	--accent-hover: #e64a19;
	--accent-text: #ffffff;

	/* Functional */
	--danger: #ef4444;
	--danger-hover: #dc2626;
	--success: #22c55e;
	--warning: #f59e0b;

	/* Subscription chip colors (active/inactive state) */
	--chip-success: #15803d;
	--chip-success-text: #ffffff;
	--chip-danger: #b91c1c;
	--chip-danger-text: #ffffff;

	/* Borders & shapes */
	--border: #e0e0e0;
	--border-light: #eeeeee;
	--border-radius: 8px;
	--border-radius-lg: 12px;
	--border-radius-sm: 4px;

	/* Layout */
	--max-width: 800px;
	--header-height: auto;

	/* Inputs */
	--bg-input: #ffffff;
	--border-input: #d0d0d0;
	--border-input-focus: #ff5722;

	/* Navigation */
	--nav-bg: #ffffff;
	--nav-active-bg: #fff5f2;
	--nav-active-border: #ff5722;
	--nav-hover-bg: #f5f5f5;
	--nav-text: #666666;
	--nav-active-text: #ff5722;

	/* Sidebar */
	--sidebar-width: 220px;
	--sidebar-bg: #ffffff;
	--sidebar-border: #eeeeee;

	/* Deeplink box */
	--bg-deeplink: #f5f5f5;
	--border-deeplink: #e0e0e0;

	/* Spinner */
	--spinner-track: #e0e0e0;
	--spinner-head: #ff5722;

	/* Avatar */
	--avatar-bg: #ff5722;
	--avatar-text: #ffffff;

	/* Logo */
	--logo-color: #2c3e50;

	/* Footer */
	--footer-text: #999999;

	/* Brand name: displayed via CSS content or HTML */
	--brand-name: "VPN Vezdehod";

	/* Background texture — crumpled paper */
	--bg-texture:
		radial-gradient(circle at 20% 80%, rgba(0,0,0,0.04) 1px, transparent 1px),
		radial-gradient(circle at 80% 20%, rgba(0,0,0,0.03) 1px, transparent 1px),
		radial-gradient(circle at 40% 40%, rgba(0,0,0,0.025) 1px, transparent 1px),
		radial-gradient(circle at 60% 90%, rgba(0,0,0,0.035) 1px, transparent 1px),
		radial-gradient(circle at 10% 50%, rgba(0,0,0,0.02) 1px, transparent 1px),
		radial-gradient(circle at 90% 60%, rgba(0,0,0,0.03) 1px, transparent 1px),
		radial-gradient(circle at 30% 10%, rgba(0,0,0,0.025) 1px, transparent 1px),
		radial-gradient(circle at 70% 70%, rgba(0,0,0,0.04) 1px, transparent 1px),
		radial-gradient(circle at 15% 25%, rgba(0,0,0,0.02) 0.5px, transparent 0.5px),
		radial-gradient(circle at 85% 75%, rgba(0,0,0,0.02) 0.5px, transparent 0.5px),
		radial-gradient(circle at 45% 15%, rgba(0,0,0,0.015) 0.5px, transparent 0.5px),
		radial-gradient(circle at 55% 85%, rgba(0,0,0,0.015) 0.5px, transparent 0.5px);
	--bg-texture-size:
		8px 8px, 12px 12px, 6px 6px, 14px 14px,
		4px 4px, 10px 10px, 5px 5px, 16px 16px,
		3px 3px, 9px 9px, 2px 2px, 11px 11px;
	--bg-texture-position:
		0 0, 3px 4px, 8px 2px, 5px 9px,
		2px 7px, 12px 1px, 9px 5px, 4px 12px,
		1px 3px, 7px 8px, 11px 6px, 6px 10px;
}