/* ==========================================================================
   AK ENTERPRISES — GLOBAL DESIGN TOKENS & BASE STYLES
   Source of truth: /elementor/design-tokens.json
   Load order: global.css -> components.css -> utilities.css
   ========================================================================== */

:root {
	/* Color */
	--ak-navy: #0B1F3A;
	--ak-blue: #009FE3;
	--ak-teal: #00C4B3;
	--ak-sky: #4FC3F7;
	--ak-white: #FFFFFF;
	--ak-light-grey: #F6F8FB;
	--ak-dark-bg: #081623;

	/* Text on the two base surfaces */
	--ak-text-on-light: var(--ak-navy);
	--ak-text-on-dark: #EAF2FB;
	--ak-text-muted: #5A6B85;

	/* Gradients */
	--ak-gradient-primary: linear-gradient(135deg, var(--ak-navy) 0%, var(--ak-blue) 100%);
	--ak-gradient-accent: linear-gradient(135deg, var(--ak-blue) 0%, var(--ak-teal) 100%);
	--ak-gradient-glow: radial-gradient(60% 60% at 50% 40%, rgba(0,159,227,0.35) 0%, rgba(0,196,179,0.15) 45%, rgba(8,22,35,0) 100%);

	/* Typography */
	--ak-font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--ak-font-body: 'Inter', 'Segoe UI', sans-serif;

	--fs-h1: clamp(2.125rem, 1.4rem + 3.2vw, 4rem);       /* 34px -> 64px */
	--fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);      /* 28px -> 44px */
	--fs-h3: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);    /* 22px -> 30px */
	--fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);      /* 18px -> 22px */
	--fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17px -> 19px */
	--fs-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);    /* 15px -> 16px */
	--fs-small: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);/* 13px -> 14px */

	/* Spacing scale */
	--space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
	--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
	--space-9: 96px; --space-10: 128px;

	/* Radius */
	--radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px;

	/* Shadows */
	--shadow-sm: 0 4px 16px rgba(11,31,58,0.06);
	--shadow-md: 0 12px 32px rgba(11,31,58,0.10);
	--shadow-lg: 0 24px 64px rgba(11,31,58,0.18);
	--shadow-glow: 0 0 40px rgba(0,196,179,0.25);

	/* Glass */
	--glass-bg-dark: rgba(255,255,255,0.08);
	--glass-border-dark: rgba(255,255,255,0.15);
	--glass-bg-light: rgba(11,31,58,0.06);
	--glass-border-light: rgba(11,31,58,0.12);
	--glass-blur: blur(16px);

	/* Layout */
	--container-max: 1320px;
	--gutter-mobile: 24px;
	--gutter-tablet: 40px;
	--gutter-desktop: 80px;

	/* Motion (referenced now, driven by GSAP in Phase 4) */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-micro: 250ms;
	--dur-section: 700ms;
}

/* Breakpoints reference (mirrors Elementor Pro Layout settings):
   Mobile <=767px | Tablet 768-1024px | Laptop 1025-1439px | Desktop >=1440px */

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--ak-font-body);
	font-size: var(--fs-body);
	line-height: 1.7;
	color: var(--ak-text-on-light);
	background-color: var(--ak-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ak-font-heading);
	color: var(--ak-navy);
	line-height: 1.2;
	margin: 0 0 var(--space-4);
	font-weight: 600;
}
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); color: var(--ak-text-muted); font-size: var(--fs-body); }
p.ak-lead { font-size: var(--fs-body-lg); color: var(--ak-text-on-light); }

a { color: var(--ak-blue); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
a:hover { color: var(--ak-teal); }

img, svg, video { max-width: 100%; height: auto; display: block; }

::selection { background: var(--ak-teal); color: var(--ak-white); }

/* Respect reduced motion everywhere (Phase 4 GSAP timelines must check this too) */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Layout helpers (paired with Elementor Flexbox Containers)
   -------------------------------------------------------------------------- */
.ak-section {
	padding-top: var(--space-9);
	padding-bottom: var(--space-9);
}
@media (max-width: 1024px) {
	.ak-section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
}
@media (max-width: 767px) {
	.ak-section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

.ak-section--light-grey { background-color: var(--ak-light-grey); }
.ak-section--dark { background-color: var(--ak-dark-bg); color: var(--ak-text-on-dark); }
.ak-section--dark h1, .ak-section--dark h2, .ak-section--dark h3, .ak-section--dark h4 { color: var(--ak-white); }
.ak-section--dark p { color: rgba(234,242,251,0.75); }

.ak-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--ak-font-heading);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ak-blue);
	margin-bottom: var(--space-3);
}
.ak-section__eyebrow::before {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--ak-gradient-accent);
	border-radius: var(--radius-pill);
}