/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Sauberes Hello Elementor Child-Theme für Solumondo mit Design-Tokens und Marken-Komponenten.
Author: Solumondo
Author URI: https://solumondo.de/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. Solumondo Design Tokens (:root)
   ========================================================================== */
:root {
	/* --- Brand Colors --- */
	--solu-navy: #050b14;
	--solu-navy-mid: #0e1b2a;
	--solu-navy-soft: #1a2d42;
	--solu-orange: #ff6a00;
	--solu-orange-hover: #e55f00;
	--solu-orange-active: #cc5500;
	--solu-orange-muted: rgba(255, 106, 0, 0.15);

	/* --- Surface & Backgrounds --- */
	--solu-surface: #ffffff;
	--solu-surface-alt: #f4f7fa;
	--solu-surface-dark: #0b1624;
	--solu-border: rgba(14, 27, 42, 0.12);
	--solu-border-dark: rgba(255, 255, 255, 0.12);

	/* --- Text Colors --- */
	--solu-text: #0e1b2a;
	--solu-text-muted: #4a5f73;
	--solu-text-light: #f1f5f9;
	--solu-text-light-muted: #94a3b8;

	/* --- Typography --- */
	--solu-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--solu-font-heading: var(--solu-font-sans);
	--solu-line-height-base: 1.6;
	--solu-line-height-heading: 1.3;

	/* Fluid Typo */
	--solu-font-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	--solu-font-h2: clamp(1.65rem, 1.3rem + 1.75vw, 2.5rem);
	--solu-font-h3: clamp(1.35rem, 1.15rem + 1vw, 2rem);
	--solu-font-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--solu-font-small: clamp(0.85rem, 0.8rem + 0.2vw, 0.925rem);

	/* --- Spacing & Radius --- */
	--solu-radius-sm: 6px;
	--solu-radius-md: 10px;
	--solu-radius-lg: 16px;
	--solu-radius-full: 9999px;

	/* --- Shadows & Glassmorphism --- */
	--solu-shadow-sm: 0 2px 8px rgba(5, 11, 20, 0.06);
	--solu-shadow-md: 0 8px 24px rgba(5, 11, 20, 0.10);
	--solu-shadow-lg: 0 16px 40px rgba(5, 11, 20, 0.16);
	--solu-glass-bg: rgba(255, 255, 255, 0.85);
	--solu-glass-dark-bg: rgba(14, 27, 42, 0.75);
	--solu-glass-border: rgba(255, 255, 255, 0.2);

	/* --- Transitions & Focus --- */
	--solu-transition: 0.2s ease-in-out;
	--solu-focus-ring: 0 0 0 3px rgba(255, 106, 0, 0.4);
}

/* ==========================================================================
   2. Base & Typography Resets
   ========================================================================== */
body {
	font-family: var(--solu-font-sans);
	font-size: var(--solu-font-body);
	line-height: var(--solu-line-height-base);
	color: var(--solu-text);
	background-color: var(--solu-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--solu-font-heading);
	line-height: var(--solu-line-height-heading);
	color: var(--solu-navy);
	font-weight: 700;
}

h1 { font-size: var(--solu-font-h1); }
h2 { font-size: var(--solu-font-h2); }
h3 { font-size: var(--solu-font-h3); }

/* Accessible Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
	box-shadow: var(--solu-focus-ring) !important;
}

/* ==========================================================================
   3. Reusable UI Components (Design System)
   ========================================================================== */

/* --- Buttons --- */
.solu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--solu-font-sans);
	font-weight: 600;
	font-size: 1rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--solu-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--solu-transition);
	line-height: 1.2;
}

.solu-btn--primary {
	background-color: var(--solu-orange);
	color: #ffffff !important;
	border-color: var(--solu-orange);
}

.solu-btn--primary:hover {
	background-color: var(--solu-orange-hover);
	border-color: var(--solu-orange-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(255, 106, 0, 0.35);
}

.solu-btn--secondary {
	background-color: var(--solu-navy);
	color: #ffffff !important;
	border-color: var(--solu-navy);
}

.solu-btn--secondary:hover {
	background-color: var(--solu-navy-mid);
	border-color: var(--solu-navy-mid);
	transform: translateY(-1px);
}

.solu-btn--ghost {
	background-color: transparent;
	color: var(--solu-navy) !important;
	border-color: var(--solu-border);
}

.solu-btn--ghost:hover {
	background-color: var(--solu-surface-alt);
	border-color: var(--solu-navy);
}

/* --- Cards & Glassmorphism --- */
.solu-card {
	background-color: var(--solu-surface);
	border-radius: var(--solu-radius-lg);
	border: 1px solid var(--solu-border);
	padding: 1.75rem;
	box-shadow: var(--solu-shadow-sm);
	transition: all var(--solu-transition);
}

.solu-card:hover {
	box-shadow: var(--solu-shadow-md);
	transform: translateY(-2px);
}

.solu-card--glass {
	background: var(--solu-glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--solu-glass-border);
}

.solu-card--dark {
	background-color: var(--solu-navy-mid);
	color: var(--solu-text-light);
	border-color: var(--solu-border-dark);
}

.solu-card--dark h2,
.solu-card--dark h3,
.solu-card--dark h4 {
	color: #ffffff;
}

/* --- Form Fields (Standardisiert für alle Plugins & Elementor) --- */
.solu-form-group {
	margin-bottom: 1.25rem;
}

.solu-form-group label {
	display: block;
	font-weight: 600;
	font-size: 0.925rem;
	margin-bottom: 0.375rem;
	color: var(--solu-navy);
}

.solu-input,
.solu-select,
.solu-textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: var(--solu-radius-md);
	border: 1px solid var(--solu-border);
	background-color: var(--solu-surface);
	color: var(--solu-text);
	font-family: var(--solu-font-sans);
	font-size: 1rem;
	transition: border-color var(--solu-transition), box-shadow var(--solu-transition);
}

.solu-input:focus,
.solu-select:focus,
.solu-textarea:focus {
	border-color: var(--solu-orange);
	box-shadow: var(--solu-focus-ring);
	outline: none;
}

/* --- Badges & Utility --- */
.solu-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: var(--solu-radius-full);
	background-color: var(--solu-orange-muted);
	color: var(--solu-orange);
}

.solu-badge--navy {
	background-color: rgba(5, 11, 20, 0.08);
	color: var(--solu-navy);
}