/* Space Grotesk — self-hosted (was a runtime Google Fonts @import; moved local
   so the brand font loads reliably, incl. RU networks where fonts.gstatic.com
   is throttled/blocked and the font fell back to a system sans). */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(/fonts/space-grotesk/space-grotesk-1.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(/fonts/space-grotesk/space-grotesk-2.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(/fonts/space-grotesk/space-grotesk-3.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ========================================
     ASPIRO DESIGN SYSTEM
     ======================================== */

	/* ----------------------------------------
     1. COLOR PALETTE
     ---------------------------------------- */

	/* Primary Brand Colors */
	--color-primary: oklch(0.45 0.165 265);
	--color-primary-light: oklch(0.52 0.195 264);
	--color-primary-dark: oklch(0.37 0.138 265);
	--color-primary-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);

	/* Accent Colors */
	--color-accent: #331f6e;
	--color-accent-light: oklch(0.50 0.17 286);
	--color-accent-dark: oklch(0.18 0.10 286);

	/* Neutral Colors */
	--color-text: oklch(0.2 0.034 252);
	--color-text-secondary: oklch(0.49 0 0);
	--color-text-tertiary: oklch(0.65 0 0);
	--color-text-inverted: oklch(1 0 0);

	/* Background Colors */
	--color-bg: #fefefe;
	--color-bg-white: oklch(1 0 0);
	--color-bg-surface: oklch(0.97 0 0);
	--color-bg-elevated: oklch(1 0 0);

	/* Border Colors */
	--color-border: oklch(0.921 0 0);
	--color-border-light: oklch(0.47 0.163 267 / 0.15);
	--color-border-primary: oklch(0.47 0.163 267 / 0.2);

	/* Semantic Colors */
	--color-success: oklch(0.7 0.163 162);
	--color-warning: oklch(0.77 0.155 75);
	--color-error: oklch(0.6 0.22 27);
	--color-info: oklch(0.59 0.188 255);

	/* Gradients */
	--gradient-primary: linear-gradient(135deg, #3c4070 0%, #795cf0 100%);
	--gradient-accent: linear-gradient(135deg, #3c4070 0%, #795cf0 100%);
	--gradient-text: linear-gradient(90deg, var(--color-text) 0%, var(--color-primary) 50%, var(--color-accent) 100%);
	--gradient-subtle: linear-gradient(180deg, oklch(0.47 0.163 267 / 0.05) 0%, transparent 100%);

	/* Primary alpha variants */
	--color-primary-alpha-4: oklch(0.45 0.165 265 / 0.04);
	--color-primary-alpha-6: oklch(0.45 0.165 265 / 0.06);
	--color-primary-alpha-8: oklch(0.45 0.165 265 / 0.08);
	--color-primary-alpha-10: oklch(0.45 0.165 265 / 0.1);
	--color-primary-alpha-12: oklch(0.45 0.165 265 / 0.12);
	--color-primary-alpha-15: oklch(0.45 0.165 265 / 0.15);
	--color-primary-alpha-25: oklch(0.45 0.165 265 / 0.25);
	--color-primary-alpha-30: oklch(0.45 0.165 265 / 0.3);
	--color-primary-alpha-40: oklch(0.45 0.165 265 / 0.4);
	--color-primary-alpha-50: oklch(0.45 0.165 265 / 0.5);
	--color-primary-alpha-60: oklch(0.45 0.165 265 / 0.6);

	/* Accent alpha variants */
	--color-accent-alpha-8: rgb(51 31 110 / 0.08);
	--color-accent-alpha-10: rgb(51 31 110 / 0.1);
	--color-accent-alpha-15: rgb(51 31 110 / 0.15);
	--color-accent-alpha-20: rgb(51 31 110 / 0.2);
	--color-accent-alpha-25: rgb(51 31 110 / 0.25);
	--color-accent-alpha-40: rgb(51 31 110 / 0.4);
	--color-accent-alpha-55: rgb(51 31 110 / 0.55);
	--color-accent-alpha-60: rgb(51 31 110 / 0.6);

	/* Extended palette */
	--color-dark-bg: oklch(0.085 0.022 247);
	--color-dark-bg-2: oklch(0.145 0.028 248);
	--color-shadow-navy: oklch(0.21 0.046 248);
	--color-gray-light: oklch(0.882 0 0);
	--color-gray-muted: oklch(0.765 0 0);

	/* ----------------------------------------
     2. TYPOGRAPHY
     ---------------------------------------- */

	/* Font Family */
	--font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
	/* Aliases for reset.css */
	--font-body: var(--font-family);
	--font-16: var(--text-base);

	/* Font Sizes */
	--text-xs: 0.75rem; /* 12px */
	--text-sm: 0.875rem; /* 14px */
	--text-base: 1rem; /* 16px */
	--text-lg: 1.125rem; /* 18px */
	--text-xl: 1.25rem; /* 20px */
	--text-2xl: 1.5rem; /* 24px */
	--text-3xl: 2rem; /* 32px */
	--text-4xl: 2.75rem; /* 44px */
	--text-5xl: 4rem; /* 64px */

	/* Font Weights */
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	/* Line Heights */
	--leading-tight: 1;
	--leading-snug: 1.2;
	--leading-normal: 1.3;
	--leading-relaxed: 1.5;
	--leading-loose: 1.6;

	/* Letter Spacing */
	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.1em;

	/* ----------------------------------------
     3. SPACING (based on 4px grid, envision style)
     ---------------------------------------- */

	--space-4: 0.25rem;
	--space-6: 0.375rem;
	--space-8: 0.5rem;
	--space-12: 0.75rem;
	--space-16: 1rem;
	--space-20: 1.25rem;
	--space-24: 1.5rem;
	--space-28: 1.75rem;
	--space-32: 2rem;
	--space-36: 2.25rem;
	--space-40: 2.5rem;
	--space-44: 2.75rem;
	--space-48: 3rem;
	--space-56: 3.5rem;
	--space-60: 3.75rem;
	--space-64: 4rem;
	--space-72: 4.5rem;
	--space-80: 5rem;
	--space-96: 6rem;
	--space-100: 6.25rem;
	--space-120: 7.5rem;
	--space-128: 8rem;

	/* Semantic spacing */
	--section-padding-y: var(--space-120);
	--section-padding-y-mobile: var(--space-64);
	--card-padding: var(--space-24);
	--card-padding-lg: var(--space-32);
	--element-gap: var(--space-4);
	--element-gap-lg: var(--space-32);

	/* Component sizing */
	--btn-height-lg: 49px;

	/* ----------------------------------------
     4. BORDER RADIUS
     ---------------------------------------- */

	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-2xl: 1.25rem;
	--radius-full: 6.25rem;

	/* ----------------------------------------
     5. SHADOWS
     ---------------------------------------- */

	--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04);
	--shadow-md: 0 4px 12px oklch(0 0 0 / 0.08);
	--shadow-lg: 0 12px 40px oklch(0 0 0 / 0.12);
	--shadow-xl: 0 20px 60px oklch(0 0 0 / 0.15);
	--shadow-card:
		0px 0.48px 1.06px -0.42px oklch(0.21 0.046 248 / 0.04), 0px 1.83px 4.03px -0.83px oklch(0.21 0.046 248 / 0.05),
		0px 8px 17.6px -1.25px oklch(0.21 0.046 248 / 0.11);
	--shadow-card-hover:
		0px 0.48px 1.06px -0.42px oklch(0.21 0.046 248 / 0.06), 0px 1.83px 4.03px -0.83px oklch(0.21 0.046 248 / 0.08),
		0px 12px 24px -1.25px oklch(0.21 0.046 248 / 0.14);
	--shadow-primary: 0 8px 24px var(--color-primary-alpha-40);

	/* ----------------------------------------
     6. TRANSITIONS
     ---------------------------------------- */

	--transition-fast: 0.15s ease;
	--transition-base: 0.2s ease;
	--transition-slow: 0.3s ease;
	--transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	--transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* ----------------------------------------
     7. Z-INDEX SCALE
     ---------------------------------------- */

	--z-base: 0;
	--z-above: 1;
	--z-dropdown: 10;
	--z-sticky: 50;
	--z-fixed: 100;
	--z-modal: 200;
	--z-tooltip: 300;

	/* ----------------------------------------
     8. LAYOUT
     ---------------------------------------- */

	--container-max: 1340px;
	--container-padding: 40px;
	--container-padding-mobile: 24px;

	/* ----------------------------------------
     9. SIDEBAR (Venice-style light theme)
     ---------------------------------------- */

	--sidebar-width: 260px;
	--sidebar-width-collapsed: 64px;
	--sidebar-bg: oklch(1 0 0);
	--sidebar-border: oklch(0.934 0 0);
	--sidebar-section-label: oklch(0.68 0.012 253);
	--sidebar-item-color: oklch(0.4 0.022 254);
	--sidebar-item-hover-bg: oklch(0.965 0.004 260);
	--sidebar-item-active-bg: var(--color-primary-alpha-8);
	--sidebar-item-active-color: var(--color-primary);
	--sidebar-footer-bg: oklch(0.985 0 0);
	--sidebar-icon-size: 18px;
	--sidebar-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

	/* Legacy variables (for backward compatibility) */
	--color-surface: oklch(0.97 0 0);
	--color-grid: oklch(0.94 0 0);
}