/**
 * Atheria — Design Tokens (Arctic Reflection v3.1)
 *
 * Single source of truth for all CSS custom properties.
 * Enqueued globally by tokens.php — no Pro dependency.
 * Namespace: --ath-* (matches ath-* class namespace).
 *
 * Load order: tokens → utilities → motion → per-widget.
 *
 * @package Atheria_Core
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. BASE PALETTE
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	--ath-arctic-blue:  #5289AD; /* accent / CTA / link          */
	--ath-arctic-navy:  #243C4C; /* primary / text / dark surface */
	--ath-arctic-mist:  #ACBCBF; /* light border / soft           */
	--ath-frost:        #F4FCFB; /* bg / surface / on-dark text   */
	--ath-reflection:   #698696; /* muted / secondary / dark border */
	--ath-focus-tint:   #DCE8E9; /* form focus bg                 */
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. SEMANTIC ALIASES
   A second layer so templates reference intent, not raw values.
   Swap a base token here and everything updates automatically.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	--ath-night:        var(--ath-arctic-navy);
	--ath-cypress:      var(--ath-reflection);
	--ath-text:         var(--ath-arctic-navy);
	--ath-gold:         var(--ath-arctic-blue);
	--ath-gold-deep:    var(--ath-arctic-navy);
	--ath-limestone:    var(--ath-frost);
	--ath-porcelain:    var(--ath-frost);
	--ath-title-light:  var(--ath-frost);
	--ath-sea-mist:     var(--ath-arctic-mist);
	--ath-muted:        var(--ath-reflection);
	--ath-sage:         var(--ath-arctic-blue);
	--ath-clay:         var(--ath-arctic-mist);
	--ath-border-light: var(--ath-arctic-mist);
	--ath-border-dark:  var(--ath-reflection);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY SCALE
   Font-size clamp() values mirror the Elementor Global Typography settings.
   Named per token so custom widgets and GSAP can reference them without
   relying on Elementor's generated classes.
   Families: headings → Noto Serif Display · body / UI → Manrope.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	/* --- font families --- */
	--ath-font-heading: 'Noto Serif Display', serif;
	--ath-font-body:    'Manrope', sans-serif;

	/* --- fluid size scale --- */
	--ath-size-display-xl:    clamp(3.25rem,  2.016rem + 5.486vw, 7.25rem);  /* Hero          */
	--ath-size-display-l:     clamp(2.75rem,  1.833rem + 4.074vw, 5.5rem);   /* Page Title    */
	--ath-size-heading-xl:    clamp(2.125rem, 1.5rem   + 2.778vw, 4rem);     /* Section Lead  */
	--ath-size-heading-l:     clamp(1.75rem,  1.375rem + 1.667vw, 2.875rem); /* Section       */
	--ath-size-heading-m:     clamp(1.375rem, 1.167rem + 0.926vw, 2rem);     /* Cards         */
	--ath-size-heading-s:     clamp(1.125rem, 1rem     + 0.556vw, 1.5rem);   /* Feature       */
	--ath-size-heading-xs:    clamp(1rem,     0.938rem + 0.278vw, 1.1875rem);/* Utility       */
	--ath-size-eyebrow:       clamp(0.75rem,  0.708rem + 0.185vw, 0.875rem); /* Overline      */
	--ath-size-btn:           clamp(0.8125rem,0.771rem + 0.185vw, 0.9375rem);/* Buttons & Nav */
	--ath-size-text-l:        clamp(1.0625rem,1.021rem + 0.185vw, 1.1875rem);/* Lead          */
	--ath-size-text-base:     clamp(0.96875rem,0.938rem + 0.139vw,1.0625rem);/* Body          */
	--ath-size-text-s:        clamp(0.84375rem,0.813rem + 0.139vw,0.9375rem);/* Meta          */

	/* --- line heights --- */
	--ath-lh-h1:   0.88;
	--ath-lh-h2:   0.92;
	--ath-lh-h3:   0.98;
	--ath-lh-body: 1.66;

	/* --- letter spacing --- */
	--ath-ls-heading:  -0.028em;
	--ath-ls-btn:       0.035em;
	--ath-ls-eyebrow:   0.1em;

	/* --- font weights --- */
	--ath-fw-heading-l:  450; /* Heading L                    */
	--ath-fw-heading-m:  600; /* Heading M / S / XS           */
	--ath-fw-eyebrow:    650; /* Eyebrow / Buttons & Nav      */
	--ath-fw-body:       400; /* Text Base / Large / Small     */
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. SPACING & SECTION SCALE
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	/* fluid side padding bounds */
	--fluid-side-padding-min: 1.25rem;
	--fluid-side-padding-max: 5rem;

	/* vertical section rhythm (used by .section-* utility classes) */
	--section-xxl-padding-min: 7.5rem; --section-xxl-padding-max: 9rem;
	--section-xl-padding-min:  6rem;   --section-xl-padding-max:  7.5rem;
	--section-l-padding-min:   5rem;   --section-l-padding-max:   6.5rem;
	--section-m-padding-min:   4rem;   --section-m-padding-max:   5.5rem;
	--section-s-padding-min:   3rem;   --section-s-padding-max:   4rem;
	--section-xs-padding-min:  2rem;   --section-xs-padding-max:  3rem;
	--section-xxs-padding-min: 1.25rem;--section-xxs-padding-max: 2rem;
	--section-header-padding-min: 1rem;--section-header-padding-max: 1.25rem;

	/* layout */
	--section-hero-height:  100vh;
	--section-offset-header: 5rem;
	--section-wide:          80rem;
	--section-narrow:        62.5rem;
	--section-narrow-xs:     45rem;

	/* component gap */
	--ath-gap: clamp(1rem, 0.68rem + 1.4vw, 2rem);
}

@media (max-width: 1024px) {
	:root {
		--fluid-side-padding-max: 3rem;
		--section-hero-height:    92vh;
	}
}

@media (max-width: 767px) {
	:root {
		--fluid-side-padding-min: 1.25rem;
		--fluid-side-padding-max: 1.5rem;
		--section-hero-height:    88vh;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. RADIUS & MOTION
   --ath-ease-out is the single shared easing token — read by CSS and GSAP.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	--ath-radius-sm: clamp(0.625rem, 0.52rem + 0.45vw, 0.875rem);
	--ath-radius-md: clamp(1rem,     0.8rem  + 0.9vw,  1.5rem);
	--ath-radius-lg: clamp(1.5rem,   1.1rem  + 1.8vw,  2.5rem);

	/* The only easing token — shared between CSS transitions and GSAP tweens.
	   GSAP reads it via: gsap.parseEase(getComputedStyle(el)
	   .getPropertyValue('--ath-ease-out').trim()) */
	--ath-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}