/*
 * Asli Solar design tokens — the single source of truth for every color,
 * font, size, radius, and shadow in the theme. Values from
 * _reference/DESIGN-SPEC.md §1–§3 (authoritative).
 *
 * Component CSS never hardcodes these values. Need something new? Add a
 * token here first.
 */

:root {
	/* ------------------------------------------------------------------ *
	 * Brand color
	 * Yellow is FILL-ONLY: 1.59:1 on white — never text, icon strokes,
	 * or hairlines on light backgrounds. Text on yellow is always navy.
	 * ------------------------------------------------------------------ */
	--asli-blue: #062ac6;
	--asli-blue-deep: #051fa0;
	--asli-navy: #0a1b57;
	--asli-yellow: #fcc600;
	--asli-yellow-deep: #e0a800;
	--asli-amber-text: #946b00;

	/* Text */
	--asli-ink: var(--asli-navy);
	--asli-body: #5a6273;
	--asli-text-on-dark: #ffffff;
	--asli-text-muted-on-dark: rgb(255 255 255 / 0.72);

	/* Surfaces */
	--asli-surface: #ffffff;
	--asli-surface-alt: #f4f6fa;
	--asli-cream: #fff8e6;
	--asli-border: #e2e6f0;
	--asli-marquee-stroke: #6b7fd7; /* 3.7:1 on white — passes large-text contrast */

	/* Dark-surface helpers (footer, stat band) */
	--asli-surface-dark: var(--asli-navy);
	--asli-border-on-dark: rgb(255 255 255 / 0.14);

	/* Overlays */
	--asli-overlay-hero: linear-gradient(rgb(4 12 44 / 0.55), rgb(4 12 44 / 0.55));
	--asli-overlay-banner: linear-gradient(rgb(4 12 44 / 0.6), rgb(4 12 44 / 0.6));

	/* ------------------------------------------------------------------ *
	 * Typography
	 * ------------------------------------------------------------------ */
	--asli-font-heading: "Chillax", "Trebuchet MS", sans-serif;
	--asli-font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

	--asli-text-hero: clamp(2.5rem, 1.5rem + 3.6vw, 4rem);        /* 40 → 64 */
	--asli-text-banner: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);  /* 36 → 52 */
	--asli-text-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);      /* 28 → 40 */
	--asli-text-h3: 1.375rem;                                     /* 22 */
	--asli-text-h4: 1.125rem;                                     /* 18 */
	--asli-text-body: 1rem;                                       /* 16 */
	--asli-text-lg: 1.125rem;
	--asli-text-meta: 0.875rem;                                   /* 14 */
	--asli-text-eyebrow: 0.8125rem;                               /* 13 */

	--asli-leading-heading: 1.15;
	--asli-leading-body: 1.7;
	--asli-tracking-heading: -0.01em;
	--asli-tracking-eyebrow: 0.14em;

	--asli-weight-heading: 600;
	--asli-weight-heading-bold: 700;
	--asli-weight-medium: 500;

	/* ------------------------------------------------------------------ *
	 * Shape & elevation
	 * ------------------------------------------------------------------ */
	--asli-radius-pill: 999px;
	--asli-radius-card: 22px;
	--asli-radius-box: 16px;
	--asli-radius-tile: 12px;

	--asli-shadow-card: 0 10px 30px rgb(10 27 87 / 0.07);
	--asli-shadow-card-hover: 0 18px 44px rgb(10 27 87 / 0.12);
	--asli-shadow-header: 0 6px 24px rgb(10 27 87 / 0.08);

	/* ------------------------------------------------------------------ *
	 * Layout & spacing
	 * Breakpoints mirror Elementor defaults: mobile ≤767, tablet 768–1024.
	 * (Media queries can't read custom properties — these are documentation;
	 * use the literal px values in @media rules.)
	 * ------------------------------------------------------------------ */
	--asli-container: 1320px;
	--asli-gutter: clamp(1rem, 4vw, 1.5rem);

	--asli-space-2xs: 0.25rem;
	--asli-space-xs: 0.5rem;
	--asli-space-sm: 0.75rem;
	--asli-space-md: 1rem;
	--asli-space-lg: 1.5rem;
	--asli-space-xl: 2rem;
	--asli-space-2xl: 3rem;
	--asli-space-3xl: 4rem;

	--asli-section-pad: clamp(3.75rem, 2.75rem + 3.5vw, 6.875rem); /* 60 → 110 */
	--asli-sect-md: clamp(2.5rem, 2rem + 2vw, 3.75rem);   /* 40 → 60  */
	--asli-sect-lg: clamp(3.75rem, 2.75rem + 3.5vw, 6.875rem); /* 60 → 110 */
	--asli-sect-xl: clamp(4.5rem, 3rem + 5vw, 9.375rem);  /* 72 → 150 */

	/* ------------------------------------------------------------------ *
	 * Motion
	 * ------------------------------------------------------------------ */
	--asli-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--asli-duration: 250ms;
	--asli-duration-slow: 450ms;
	--asli-duration-zoom: 600ms;
	--asli-duration-shine: 600ms;
	--asli-duration-reveal: 1.25s;
}