/**
 * 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-on-surface-muted);
	--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.18em;

	/* --- 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);
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. TYPE LEVELS
   The twelve levels of the design system, each with its own size, weight, line
   height and letter spacing. Three family slots feed them: heading (display →
   h3), body (h4 → h6, body, lead, caption) and accent (eyebrow, button).

   The accent slot defaults to the body family, so a buyer who never chooses one
   downloads no extra face. --ath-font-eyebrow and --ath-font-buttons are kept as
   aliases of it because widget CSS already consumes those two names.

   Values here are the unscaled design at 100%. The theme overrides them per
   request with the optical factor and scale multiplier applied; these are the
   fallbacks that keep the system whole if the theme is swapped.

   The --ath-size-*, --ath-lh-*, --ath-ls-* and --ath-fw-* block in section 3
   predates this one and is deliberately left untouched — it is consumed by
   widget stylesheets and is retired only when those are migrated.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	/* --- family slots --- */
	--ath-font-accent:  var(--ath-font-body);
	--ath-font-eyebrow: var(--ath-font-accent);
	--ath-font-buttons: var(--ath-font-accent);

	/* --- scale multipliers, published so components can derive their own sizes --- */
	--ath-scale-heading: 1;
	--ath-scale-body:    1;
	--ath-scale-accent:  1;

	/* --- display --- */
	--ath-text-display-size:   clamp(3.25rem, 2.016rem + 5.486vw, 7.25rem);
	--ath-text-display-weight: 400;
	--ath-text-display-lh:     0.88;
	--ath-text-display-ls:     -0.028em;

	/* --- h1 --- */
	--ath-text-h1-size:   clamp(2.75rem, 1.833rem + 4.074vw, 5.5rem);
	--ath-text-h1-weight: 400;
	--ath-text-h1-lh:     0.92;
	--ath-text-h1-ls:     -0.024em;

	/* --- h2 --- */
	--ath-text-h2-size:   clamp(2.125rem, 1.5rem + 2.778vw, 4rem);
	--ath-text-h2-weight: 400;
	--ath-text-h2-lh:     0.98;
	--ath-text-h2-ls:     -0.018em;

	/* --- h3 --- */
	--ath-text-h3-size:   clamp(1.75rem, 1.375rem + 1.667vw, 2.875rem);
	--ath-text-h3-weight: 450;
	--ath-text-h3-lh:     1.04;
	--ath-text-h3-ls:     -0.012em;

	/* --- h4 --- */
	--ath-text-h4-size:   clamp(1.375rem, 1.167rem + 0.926vw, 2rem);
	--ath-text-h4-weight: 600;
	--ath-text-h4-lh:     1.14;
	--ath-text-h4-ls:     -0.01em;

	/* --- h5 --- */
	--ath-text-h5-size:   clamp(1.125rem, 1rem + 0.556vw, 1.5rem);
	--ath-text-h5-weight: 600;
	--ath-text-h5-lh:     1.2;
	--ath-text-h5-ls:     -0.004em;

	/* --- h6 --- */
	--ath-text-h6-size:   clamp(1rem, 0.938rem + 0.278vw, 1.1875rem);
	--ath-text-h6-weight: 600;
	--ath-text-h6-lh:     1.24;
	--ath-text-h6-ls:     0;

	/* --- eyebrow --- */
	--ath-text-eyebrow-size:      clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem);
	--ath-text-eyebrow-weight:    650;
	--ath-text-eyebrow-lh:        1.3;
	--ath-text-eyebrow-ls:        0.18em;
	--ath-text-eyebrow-transform: uppercase;

	/* --- button --- */
	--ath-text-button-size:   clamp(0.8125rem, 0.771rem + 0.185vw, 0.9375rem);
	--ath-text-button-weight: 650;
	--ath-text-button-lh:     1.2;
	--ath-text-button-ls:     0.035em;

	/* --- body --- */
	--ath-text-body-size:   clamp(0.96875rem, 0.938rem + 0.139vw, 1.0625rem);
	--ath-text-body-weight: 400;
	--ath-text-body-lh:     1.66;
	--ath-text-body-ls:     normal;

	/* --- lead --- */
	--ath-text-lead-size:   clamp(1.0625rem, 1.021rem + 0.185vw, 1.1875rem);
	--ath-text-lead-weight: 400;
	--ath-text-lead-lh:     1.68;
	--ath-text-lead-ls:     normal;

	/* --- caption --- */
	--ath-text-caption-size:   clamp(0.84375rem, 0.813rem + 0.139vw, 0.9375rem);
	--ath-text-caption-weight: 400;
	--ath-text-caption-lh:     1.55;
	--ath-text-caption-ls:     normal;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. DERIVED TONES AND SEMANTIC ROLES

   Derived tones are the accessible variants of the palette. Each is the parent
   colour at the same hue and saturation, moved in lightness until it clears its
   contrast target against a named background. The values below are the stock
   palette's results, pinned so a default install is exact; the theme recomputes
   them whenever the buyer changes a primitive.

   Roles are what templates and components bind to. Binding to a role rather than
   a primitive is what makes a palette change safe: the role keeps its meaning and
   its contrast guarantee while the colour underneath it moves.

   Ratios in the comments are measured against sRGB relative luminance, WCAG 2.1.
   AA body text needs 4.5, non-text and boundaries need 3.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	/* --- derived tones --- */
	--ath-glacier-dark:     #487797; /* glacier darkened for text on light  4.62 on frost */
	--ath-glacier-light:    #82A9C4; /* glacier lightened for text on navy  4.61 on navy  */
	--ath-reflection-light: #92A7B3; /* reflection lightened for meta text  4.60 on navy  */
	--ath-reflection-dark:  #5C7684; /* reflection darkened for muted text  4.60 on frost */
	--ath-mist-dark:        #6C878D; /* mist darkened for real boundaries   3.05 on tint  */

	/* --- accent interaction states: a fixed lightness step away from the background --- */
	--ath-glacier-dark-hover:    #3B617B; /* glacier-dark, 0.08 darker   6.33 on frost */
	--ath-glacier-dark-pressed:  #34566E; /* glacier-dark, 0.12 darker   7.46 on frost */
	--ath-glacier-light-hover:   #9EBCD1; /* glacier-light, 0.08 lighter 5.78 on navy  */
	--ath-glacier-light-pressed: #ACC6D8; /* glacier-light, 0.12 lighter 6.47 on navy  */

	/* --- surfaces --- */
	--ath-surface:              var(--ath-frost);
	--ath-surface-raised:       #FFFFFF;
	--ath-surface-inverse:      var(--ath-arctic-navy);
	--ath-surface-inverse-muted: var(--ath-reflection-dark);
	--ath-surface-field:        #FFFFFF;
	--ath-surface-field-focus:  var(--ath-focus-tint);
	--ath-surface-accent:       var(--ath-glacier-dark);

	/* --- text on light surfaces --- */
	--ath-on-surface:        var(--ath-arctic-navy);    /* 11.04 frost · 11.50 white · 9.18 tint */
	--ath-on-surface-muted:  var(--ath-reflection-dark); /*  4.60 frost ·  4.79 white */
	--ath-on-surface-accent: var(--ath-glacier-dark);    /*  4.62 frost ·  4.82 white */
	--ath-on-field-focus:    var(--ath-arctic-navy);     /*  9.18 on the focus tint   */

	--ath-on-surface-accent-hover:   var(--ath-glacier-dark-hover);   /* 6.33 frost */
	--ath-on-surface-accent-pressed: var(--ath-glacier-dark-pressed); /* 7.46 frost */

	/* --- text on dark surfaces --- */
	--ath-on-inverse:        var(--ath-frost);            /* 11.04 on navy · 4.60 on the muted band */
	--ath-on-inverse-muted:  var(--ath-arctic-mist);      /*  5.86 on navy */
	--ath-on-inverse-meta:   var(--ath-reflection-light); /*  4.60 on navy */
	--ath-on-inverse-accent: var(--ath-glacier-light);    /*  4.61 on navy */

	--ath-on-inverse-accent-hover:   var(--ath-glacier-light-hover);   /* 5.78 on navy */
	--ath-on-inverse-accent-pressed: var(--ath-glacier-light-pressed); /* 6.47 on navy */

	/* --- text on a filled accent block --- */
	--ath-on-accent: var(--ath-frost); /* 4.62 on the accent surface */

	/* --- lines and boundaries --- */
	--ath-border-subtle:  var(--ath-arctic-mist); /* decorative only — 1.88 on frost, exempt under 1.4.11 */
	--ath-border-strong:  var(--ath-mist-dark);   /* 3.67 frost · 3.83 white · 3.05 tint */
	--ath-border-inverse: var(--ath-arctic-mist); /* 5.86 on navy */

	/* --- rating stars --- */
	--ath-rating-star:         var(--ath-on-surface); /* 11.04 frost */
	--ath-rating-star-inverse: var(--ath-on-inverse); /* over media or a dark surface */

	/* --- focus --- */
	--ath-focus-ring:         var(--ath-glacier-dark);  /* 4.62 frost · 4.82 white · 3.84 tint */
	--ath-focus-ring-inverse: var(--ath-glacier-light); /* 4.61 on navy */
	--ath-focus-ring-width:   2px;
	--ath-focus-ring-offset:  3px;
}