/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://brzikes.rs
 Description:  Custom child theme for Brzi Keš Lead Generation Platform
 Author:       Brzi Keš
 Author URI:   https://brzikes.rs
 Template:     generatepress
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  generatepress-child
*/

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
	/* ── Brand Colors (Dark Slate + Indigo) ── */
	--color-primary-h: 210;
	--color-primary-s: 73%;
	--color-primary-l: 15%;
	--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	--color-primary-light: hsl(var(--color-primary-h), 21%, 33%);
	--color-primary-dark: hsl(var(--color-primary-h), 73%, 10%);
	--color-primary-darker: hsl(var(--color-primary-h), 73%, 6%);
	--color-primary-rgb: 10, 37, 64;

	/* ── CTA / Action Color ── */
	--color-cta-h: 244;
	--color-cta-s: 100%;
	--color-cta-l: 68%;
	--color-cta: hsl(var(--color-cta-h), var(--color-cta-s), var(--color-cta-l));
	--color-cta-hover: hsl(var(--color-cta-h), 100%, 72%);
	--color-cta-dark: hsl(var(--color-cta-h), 100%, 56%);
	--color-cta-rgb: 99, 91, 255;

	/* â”€â”€ Accent â”€â”€ */
	--color-accent: #00D4AA;
	--color-accent-light: #33DDBB;

	/* â”€â”€ Neutral Colors â”€â”€ */
	--color-background: #FFFFFF;
	--color-surface: #F6F9FC;
	--color-text-primary: #0A2540;
	--color-text-secondary: #425466;
	--color-text-muted: #6B7880;
	--color-text-inverse: #FFFFFF;

	/* â”€â”€ Semantic Colors â”€â”€ */
	--color-error: #DF1B41;
	--color-warning: #F5A623;
	--color-success: #00D4AA;

	/* â”€â”€ Borders â”€â”€ */
	--color-border: #E6EBF1;
	--color-border-light: #F0F4F8;
	--color-border-focus: var(--color-cta);

	/* â”€â”€ Footer / Dark Surfaces â”€â”€ */
	--color-dark-bg: #0A2540;
	--color-dark-surface: #0F2E4C;

	/* â”€â”€ Typography â”€â”€ */
	--font-family-primary: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;
	--font-size-5xl: 3rem;
	--font-size-6xl: 3.75rem;

	/* â”€â”€ Spacing Scale (4px base) â”€â”€ */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* â”€â”€ Border Radius â”€â”€ */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-card: 22px;
	--radius-full: 9999px;

	/* ── Shadows (Modern Airy Shadows) ── */
	--shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(10, 37, 64, 0.1), 0 2px 4px -1px rgba(10, 37, 64, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(10, 37, 64, 0.1), 0 4px 6px -2px rgba(10, 37, 64, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(10, 37, 64, 0.12), 0 10px 10px -5px rgba(10, 37, 64, 0.04);
	--shadow-header: 0 1px 0 rgba(10, 37, 64, 0.05);
	--shadow-card: var(--shadow-md);

	/* â”€â”€ Transitions â”€â”€ */
	--transition-base: 0.2s ease;
	--transition-slow: 0.3s ease;
	--transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

	/* â”€â”€ Layout â”€â”€ */
	--container-max: 1200px;
	--header-height: 76px;
	--logo-height: 42px;
	--logo-height-mobile: 32px;

	/* â”€â”€ Z-index â”€â”€ */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-fab: 500;
	--z-toast: 600;

	/* â”€â”€ Button â”€â”€ */
	--btn-radius: var(--radius-full);
}
