/* ========================================
   BLT Events - Front-end design tokens
   ========================================

   Every colour, radius, shadow and font in the plugin's front-end CSS
   resolves through one of the custom properties below. Nothing downstream
   hardcodes a value, so a site can restyle the whole plugin by redefining
   these — no `!important`, no overriding dozens of selectors.

   Three ways to change them, in increasing order of specificity:

     1. Settings → Appearance, which prints the overrides an admin picked.
     2. Skeleton mode (blt-events-skeleton.css), which re-points the tokens
        at a framework's own variables — see that file.
     3. Your own stylesheet or a code snippet:

          :root {
            --blt-e-primary: var(--action);
            --blt-e-radius: var(--radius-m);
          }

   Token naming: `--blt-e-` prefixed so it cannot collide with a theme's
   own `--primary` or a framework's utility variables. The admin-side
   design system uses `--blt-` (see blt-design-system.css) and is separate:
   these tokens never load in wp-admin.
   ---------------------------------------- */

:root {
	/* --- Brand --- */
	--blt-e-primary: #6366f1;
	--blt-e-primary-hover: #4f46e5;
	--blt-e-primary-tint: #f0f0ff;
	/* Text drawn on top of --blt-e-primary. */
	--blt-e-on-primary: #ffffff;
	/* Static fallback for browsers without color-mix() support (Safari <
	   16.2, Firefox < 113) — the @supports block below replaces this with
	   a version derived from --blt-e-primary once it's safe to use, same
	   guard convention as blt-events-skeleton.css's own color-mix() use. */
	--blt-e-focus-ring: rgba(99, 102, 241, 0.3);
	--blt-e-focus-glow: rgba(99, 102, 241, 0.1);

	/* Links. Defaults to the brand colour so the calendar and the single
	   event page read as one design rather than two. */
	--blt-e-link: var(--blt-e-primary);
	--blt-e-link-hover: var(--blt-e-primary-hover);

	/* --- Text --- */
	--blt-e-fg-strong: #111827;
	--blt-e-fg: #1f2937;
	--blt-e-fg-soft: #374151;
	--blt-e-fg-muted: #6b7280;
	--blt-e-fg-subtle: #9ca3af;

	/* --- Surfaces --- */
	--blt-e-surface: #ffffff;
	--blt-e-surface-alt: #f9fafb;
	--blt-e-surface-sunken: #f3f4f6;

	/* --- Lines --- */
	--blt-e-border: #e5e7eb;
	--blt-e-border-strong: #d1d5db;
	--blt-e-border-subtle: rgba(0, 0, 0, 0.12);

	/* --- Status --- */
	--blt-e-success: #059669;
	--blt-e-success-bg: #f0fdf4;
	--blt-e-success-border: #bbf7d0;

	--blt-e-danger: #dc2626;
	--blt-e-danger-bg: #fef2f2;
	--blt-e-danger-border: #fecaca;

	--blt-e-warning: #92400e;
	--blt-e-warning-bg: #fffbeb;
	--blt-e-warning-border: #fde68a;

	/* --- Shape ---
	   Matches ACSS's own --radius-xs/-s/-m/-l scale (4/8/16/32px), same
	   reasoning as the text-* sizes above: Styled mode's numbers should
	   land exactly where Skeleton mode's do, not just be close. */
	--blt-e-radius-xs: 4px;
	--blt-e-radius-sm: 8px;
	--blt-e-radius: 16px;
	--blt-e-radius-lg: 32px;
	--blt-e-radius-pill: 999px;

	/* --- Depth --- */
	--blt-e-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
	--blt-e-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
	--blt-e-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

	/* --- Type --- */
	/* `inherit` would be the theme's font; the plugin ships a system stack so
	   it looks deliberate out of the box. Skeleton mode swaps this to inherit. */
	--blt-e-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--blt-e-font-heading: var(--blt-e-font);

	/* --- Rhythm --- */
	--blt-e-gap-sm: 0.5rem;
	--blt-e-gap: 1rem;
	--blt-e-gap-lg: 2rem;
	--blt-e-pad: 2rem;

	/* Fluid spacing scale used by the single event page. Named after the
	   Automatic.css scale it mirrors (space-xs through xxl, content-gap,
	   grid-gap, section-space-xs through xxl, section-padding-x, gutter),
	   which Skeleton mode maps to directly. Copied from ACSS's own clamp
	   curves, same reasoning as text-* and radius-* above. */
	--blt-e-space-xs: clamp(1.1256rem, 1.0500rem + 0.2099vw, 1.3333rem);
	--blt-e-space-s: clamp(1.5004rem, 1.3187rem + 0.5047vw, 2rem);
	--blt-e-space-m: clamp(2rem, 1.6364rem + 1.0101vw, 3rem);
	--blt-e-space-l: clamp(2.666rem, 1.9991rem + 1.8525vw, 4.5rem);
	--blt-e-space-xl: clamp(3.5538rem, 2.3915rem + 3.2285vw, 6.75rem);
	--blt-e-space-xxl: clamp(4.7372rem, 2.778rem + 5.4422vw, 10.125rem);
	--blt-e-content-gap: var(--blt-e-space-m);
	--blt-e-grid-gap: var(--blt-e-space-m);
	--blt-e-section-space-xs: clamp(2.2511rem, 1.1303rem + 3.1133vw, 5.3333rem);
	--blt-e-section-space-s: clamp(3.0008rem, 1.1828rem + 5.0497vw, 8rem);
	--blt-e-section-space-m: clamp(4rem, 1.0909rem + 8.0808vw, 12rem);
	--blt-e-section-space-l: clamp(5.332rem, 0.7255rem + 12.796vw, 18rem);
	--blt-e-section-space-xl: clamp(7.1076rem, -0.1261rem + 20.0934vw, 27rem);
	--blt-e-section-space-xxl: clamp(9.4744rem, -1.8077rem + 31.339vw, 40.5rem);
	--blt-e-section-padding-x: var(--blt-e-space-m);
	--blt-e-gutter: var(--blt-e-space-m);

	/* Fluid text sizes for the same page (text-xs/s/m/l/xl/xxl). Copied
	   from ACSS's own --text-* clamp curves (not just approximated) so
	   Styled mode's numbers land exactly where Skeleton mode's do once it
	   resolves var(--text-*, ...) against a real ACSS install, instead of
	   two independently-tuned scales that happen to be close. */
	--blt-e-text-xs: clamp(1.4rem, 1.3273rem + 0.2020vw, 1.6rem);
	--blt-e-text-s: clamp(1.6rem, 1.5273rem + 0.2020vw, 1.8rem);
	--blt-e-text-m: clamp(2rem, 1.8545rem + 0.4040vw, 2.4rem);
	--blt-e-text-l: clamp(2.4rem, 2.1091rem + 0.8081vw, 3.2rem);
	--blt-e-text-xl: clamp(3rem, 2.3455rem + 1.8182vw, 4.8rem);
	--blt-e-text-xxl: clamp(3.6rem, 2.5455rem + 2.9293vw, 6.5rem);

	/* --- Neutrals (single event page) --- */
	--blt-e-neutral: var(--blt-e-fg-strong);
	--blt-e-neutral-light: var(--blt-e-border);
	--blt-e-neutral-ultra-light: var(--blt-e-surface-sunken);
	--blt-e-neutral-semi-light: var(--blt-e-fg-muted);
	--blt-e-neutral-semi-dark: var(--blt-e-fg-soft);
	/* Hairlines between page sections and around the event card. */
	--blt-e-divider: rgba(0, 0, 0, 0.2);
	/* Category chips: the neutral at 10% / 20%. */
	--blt-e-chip-bg: rgba(17, 24, 39, 0.1);
	--blt-e-chip-bg-hover: rgba(17, 24, 39, 0.2);
	--blt-e-chip-radius: var(--blt-e-radius-xs);
	/* Sponsor logo tiles: contained with breathing room. Use `cover` and 0
	   for photos that should fill the square. */
	--blt-e-sponsor-fit: contain;
	--blt-e-sponsor-padding: 12%;

	/* --- Layout --- */
	--blt-e-form-width: 640px;
	/* Measure of the event description on the single event page. */
	--blt-e-prose-width: 715px;
	/* Max width of the registration checkout: room for the Attendee details
	   form beside its Event summary. Narrower containers stack the two. */
	--blt-e-checkout-width: 1120px;
	/* The checkout's own full-panel background. Not --blt-e-surface-sunken
	   directly: that token is correctly mapped for smaller recessed
	   elements (disabled buttons, tiles), but on some frameworks its
	   mapped colour is a much bigger step down than a whole-panel
	   background should read as. */
	--blt-e-checkout-bg: var(--blt-e-surface-sunken);
	/* Max width of the calendar and listing containers. 1350px matches
	   ACSS's own default content width; Settings > Appearance can widen or
	   narrow it. */
	--blt-e-content-width: 1350px;
}

/* Where color-mix() is supported, derive the focus ring/glow from the
   actual primary colour (custom or default) instead of the static indigo
   fallback above. */
@supports (color: color-mix(in oklch, red 10%, transparent)) {
	:root {
		--blt-e-focus-ring: color-mix(in srgb, var(--blt-e-primary) 30%, transparent);
		--blt-e-focus-glow: color-mix(in srgb, var(--blt-e-primary) 10%, transparent);
	}
}