/* ==========================================================================
   ChopSkills Global Design System
   ==========================================================================
   Global variables, typography (Inter), base buttons, and layout wrappers.
   ========================================================================== */

:root {
	/* Palette: Dark Blue & Gold */
	--cs-bg-primary: #0f172a;      /* slate-900 */
	--cs-bg-card: #1e293b;         /* slate-800 */
	--cs-bg-card-hover: #334155;   /* slate-700 */
	
	--cs-accent: #3b82f6;          /* blue-500 */
	--cs-accent-glow: rgba(59, 130, 246, 0.25);
	
	--cs-gold: #fbbf24;            /* amber-400 */
	--cs-gold-glow: rgba(251, 191, 36, 0.25);

	--cs-success: #22c55e;         /* green-500 */
	--cs-danger: #ef4444;          /* red-500 */

	--cs-text-primary: #f8fafc;    /* slate-50 */
	--cs-text-muted: #94a3b8;      /* slate-400 */
	
	--cs-border-subtle: rgba(255, 255, 255, 0.1);
	
	--cs-radius: 12px;
	--cs-radius-sm: 8px;
	
	--cs-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
	--cs-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.5);
	
	--cs-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	
	--cs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Global Layout Wrapper (.cs-container)
   Forces our typography and breaks out of aggressive theme constraints.
   -------------------------------------------------------------------------- */
.cs-container {
	font-family: var(--cs-font);
	color: var(--cs-text-primary);
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1rem;
	box-sizing: border-box;
}

.cs-container * {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Block Theme Overrides
   Fixes issues where the active block theme's logo might blow up in size
   -------------------------------------------------------------------------- */
.wp-block-site-logo img.custom-logo {
	max-width: 150px !important;
	height: auto !important;
}

/* --------------------------------------------------------------------------
   Buttons (.cs-btn)
   -------------------------------------------------------------------------- */
.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cs-font);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.75rem 1.5rem;
	border-radius: 30px;
	border: 1px solid var(--cs-border-subtle);
	background: var(--cs-bg-card);
	color: var(--cs-text-primary);
	cursor: pointer;
	text-decoration: none;
	transition: var(--cs-transition);
}

.cs-btn:hover {
	background: var(--cs-bg-card-hover);
	color: #fff;
	transform: translateY(-1px);
}

.cs-btn-primary {
	background: var(--cs-accent);
	color: #fff;
	border-color: var(--cs-accent);
	box-shadow: 0 4px 15px var(--cs-accent-glow);
}

.cs-btn-primary:hover {
	background: #2563eb; /* blue-600 */
	box-shadow: 0 6px 20px var(--cs-accent-glow);
}

.cs-btn-premium {
	background: linear-gradient(135deg, var(--cs-gold), #f59e0b);
	color: #000;
	border: none;
	box-shadow: 0 4px 15px var(--cs-gold-glow);
}

.cs-btn-premium:hover {
	filter: brightness(1.1);
	box-shadow: 0 6px 20px var(--cs-gold-glow);
	color: #000;
}