/*
Theme Name: Cartosystem Theme
Theme URI: https://github.com/cartosystem/cartosystem-theme
Description: A premium, ultra-fast custom hybrid WordPress theme optimized to work in perfect harmony with Breakdance Builder.
Version: 1.0.0
Author: Antigravity & Vince
Author URI: https://cartosystem.com
Text Domain: cartosystem-theme
Domain Path: /languages
Tags: custom-menu, featured-images, translation-ready, full-width-template
*/

/* ==========================================================================
   Modern Global CSS Custom Properties (Theme Design System - Precision Institutional)
   ========================================================================== */
:root {
	/* Colors - Deep Space Precision Institutional */
	--color-primary-h: 220;
	--color-primary-s: 100%;
	--color-primary-l: 17%; /* #001d59 - Institutional Dark Blue */
	--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));

	--color-primary-container-h: 219;
	--color-primary-container-s: 100%;
	--color-primary-container-l: 26%; /* #003087 - Institutional Blue accent container */
	--color-primary-container: hsl(var(--color-primary-container-h), var(--color-primary-container-s), var(--color-primary-container-l));

	--color-secondary-h: 218;
	--color-secondary-s: 60%;
	--color-secondary-l: 43%; /* #2c5cae - Interactive Slate Blue */
	--color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));

	--color-accent-h: 190;
	--color-accent-s: 100%;
	--color-accent-l: 41%; /* #00afd2 - Modern Glowing Cyan */
	--color-accent: hsl(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l));
	--color-accent-light: hsl(var(--color-accent-h), var(--color-accent-s), 95%);

	/* Neutrals & Surfaces */
	--color-dark: hsl(240, 28%, 14%);      /* #1a1a2e - Heading Dark */
	--color-dark-light: hsl(220, 16%, 22%);
	--color-light: hsl(216, 41%, 97.8%);   /* #f7f9fc - Surface/Background Light */
	--color-body-slate: hsl(218, 17%, 34.9%); /* #4a5568 - Readable Slate Body Text */
	
	--color-surface-lowest: #ffffff;
	--color-surface-low: #f2f4f7;
	--color-surface-container: #eceef1;
	--color-surface-high: #e6e8eb;
	
	--color-gray-100: hsl(210, 20%, 96%);
	--color-gray-200: hsl(214, 32%, 91.4%);  /* #e2e8f0 - Border Subtle */
	--color-gray-500: hsl(210, 8%, 56%);
	--color-gray-800: hsl(220, 12%, 18%);

	/* System Statuses */
	--color-success: hsl(150, 84%, 37%);
	--color-error: hsl(350, 84%, 48%);
	--color-warning: hsl(38, 92%, 50%);

	/* High-end Glassmorphism & Elevation (Very subtle, minimal depth) */
	--blur-glass: 16px;
	--bg-glass: rgba(255, 255, 255, 0.9);
	--bg-glass-dark: rgba(0, 29, 89, 0.95);
	--border-glass: rgba(226, 232, 240, 0.5);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px -2px rgba(0, 29, 89, 0.04); /* Subtle primary blue tinted shadow */
	--shadow-lg: 0 12px 24px -12px rgba(0, 48, 135, 0.15); /* Hover shadow */

	/* Layout & Spacing (8px Base Unit Grid) */
	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 24px;
	--spacing-lg: 32px;
	--spacing-xl: 48px;
	--spacing-xxl: 80px; /* Section Vertical padding gap */

	/* Typography - Precision Institutional Dual-Font strategy */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-headings: 'Plus Jakarta Sans', var(--font-sans);

	--text-xs: 12px;     /* Label Bold scale */
	--text-sm: 14px;     /* Body SM scale */
	--text-base: 16px;   /* Body MD scale */
	--text-md: 18px;     /* Body LG scale */
	--text-lg: 20px;     /* Headline SM scale */
	--text-xl: 24px;     /* Headline MD scale */
	--text-xxl: 32px;    /* Headline LG scale */
	--text-display: 48px; /* Headline XL scale */

	--weight-light: 300;
	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-black: 800;

	--line-height-tight: 1.15;
	--line-height-heading: 1.25;
	--line-height-base: 1.5; /* Generous 1.5x line height for maximum whitespace feel */

	/* Customizer Mapped Variables (will be updated dynamically by Customizer) */
	--theme-boxed-width: 1200px; /* Centered 1200px Grid Container */
	--theme-header-bg: var(--bg-glass);
	--theme-header-border: var(--color-gray-200);
	--theme-header-sticky: 1; /* 1 = sticky, 0 = relative */

	--transition-smooth: all 0.3s ease;
	--transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Aliases for compatibility with static layout CSS */
	--color-bg: var(--color-light);
	--color-surface: var(--color-surface-lowest);
	--color-surface-container-lowest: var(--color-surface-lowest);
	--color-surface-container-low: var(--color-surface-low);
	--color-surface-container: #eceef1;
	--color-surface-container-high: var(--color-surface-high);
	--color-surface-container-highest: #e0e3e6;
	--color-text-on-primary: #ffffff;
	--color-text-body: var(--color-body-slate);
	--color-text-heading: var(--color-dark);
	--color-border-subtle: var(--color-gray-200);
	--color-outline: #747683;
	--spacing-section-gap: var(--spacing-xxl);
	--container-max: var(--theme-boxed-width);
	--margin-mobile: 16px;
	--margin-desktop: 48px;
	--radius-sm: 4px;
	--radius-default: var(--theme-cta-border-radius, 8px);
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 9999px;
	--font-heading: var(--font-headings);
	--font-body: var(--font-sans);
	--spacing-gutter: 24px;
}