/* =========================================================================
   Axil Design Tokens — single source of truth.
   Change brand values here and the whole site (theme + widgets) updates.
   All tokens are prefixed --axil- to avoid collisions.
   ========================================================================= */

:root {
	/* ---- Color: dark base ---- */
	--axil-navy-900: #0a1733; /* primary dark / hero background */
	--axil-navy-800: #0f2147; /* dark sections */
	--axil-navy-700: #15294f; /* raised dark surfaces */
	--axil-graphite: #1c2433; /* cards on dark */

	/* ---- Color: neutrals ---- */
	--axil-ink: #0b1220;       /* near-black body text on light */
	--axil-slate: #5b6b86;     /* secondary text */
	--axil-slate-300: #97a3b8; /* muted text on dark */
	--axil-line: #e2e8f2;      /* hairline borders on light */
	--axil-line-dark: rgba(255, 255, 255, 0.1); /* hairline on dark */
	--axil-mist: #e8edf5;      /* light section background */
	--axil-cloud: #f5f8fc;     /* lightest section background */
	--axil-white: #ffffff;

	/* ---- Color: accents ---- */
	--axil-cyan: #2bd9f0;      /* primary accent */
	--axil-cyan-600: #14a8c4;  /* accent hover / gradient stop */
	--axil-cyan-050: rgba(43, 217, 240, 0.12); /* accent tint background */
	--axil-success: #28c76f;   /* ROI / positive metrics */

	/* ---- Gradients ---- */
	--axil-gradient-accent: linear-gradient(135deg, var(--axil-cyan) 0%, var(--axil-cyan-600) 100%);
	--axil-gradient-dark: linear-gradient(160deg, var(--axil-navy-900) 0%, var(--axil-navy-800) 100%);

	/* ---- Semantic surface/text aliases ---- */
	--axil-bg: var(--axil-white);
	--axil-bg-alt: var(--axil-cloud);
	--axil-text: var(--axil-ink);
	--axil-text-muted: var(--axil-slate);
	--axil-accent: var(--axil-cyan);

	/* ---- Typography ---- */
	--axil-font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--axil-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Fluid type scale (clamped min .. preferred .. max) */
	--axil-fs-100: 0.875rem;                         /* 14px */
	--axil-fs-200: 1rem;                             /* 16px */
	--axil-fs-300: 1.125rem;                         /* 18px */
	--axil-fs-400: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* 20–24 */
	--axil-fs-500: clamp(1.5rem, 1.3rem + 1vw, 2rem);        /* 24–32 */
	--axil-fs-600: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);     /* 32–44 */
	--axil-fs-700: clamp(2.5rem, 1.9rem + 2.8vw, 3.75rem);   /* 40–60 */
	--axil-fs-800: clamp(3rem, 2.2rem + 3.6vw, 4.5rem);      /* 48–72 */

	--axil-lh-tight: 1.1;
	--axil-lh-snug: 1.25;
	--axil-lh-normal: 1.65;

	--axil-fw-regular: 400;
	--axil-fw-medium: 500;
	--axil-fw-semibold: 600;
	--axil-fw-bold: 700;
	--axil-fw-extrabold: 800;

	/* ---- Spacing scale (8px base) ---- */
	--axil-space-1: 0.5rem;   /* 8 */
	--axil-space-2: 1rem;     /* 16 */
	--axil-space-3: 1.5rem;   /* 24 */
	--axil-space-4: 2rem;     /* 32 */
	--axil-space-5: 3rem;     /* 48 */
	--axil-space-6: 4rem;     /* 64 */
	--axil-space-7: 6rem;     /* 96 */

	/* Section vertical rhythm (responsive). */
	--axil-section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

	/* ---- Layout ---- */
	--axil-container: 1200px;
	--axil-container-narrow: 880px;
	--axil-gutter: 1.5rem;

	/* ---- Radii ---- */
	--axil-radius-sm: 8px;
	--axil-radius-md: 12px;
	--axil-radius-lg: 16px;
	--axil-radius-pill: 999px;

	/* ---- Shadows ---- */
	--axil-shadow-sm: 0 1px 2px rgba(10, 23, 51, 0.06), 0 1px 3px rgba(10, 23, 51, 0.08);
	--axil-shadow-md: 0 8px 24px rgba(10, 23, 51, 0.1);
	--axil-shadow-lg: 0 18px 48px rgba(10, 23, 51, 0.16);
	--axil-shadow-accent: 0 12px 30px rgba(20, 168, 196, 0.28);

	/* ---- Motion ---- */
	--axil-transition: 0.25s ease;
	--axil-transition-slow: 0.4s ease;

	/* ---- Z-index ---- */
	--axil-z-header: 1000;
	--axil-z-overlay: 1100;
}