/* AUTO-GENERATED by build.sh — do not edit.
   Source of truth: helios-design-theme/assets/css/tokens.css
   Edit the theme copy and re-run ./build.sh. */
/* ===========================================================================
   Helios Design — Design tokens
   Single source of truth for colour, type, spacing and motion. Every widget
   in helios-design-widgets references these variables rather than literals,
   so restyling the site is a change in this one file.

   See design/DESIGN-helios-design.md for the rationale behind each value.
   ======================================================================== */

:root {
	/* --- ink ladder (the canvas) ------------------------------------- */
	--hl-ink:            #0B0908;
	--hl-ink-2:          #141110;
	--hl-ink-3:          #1D1917;

	/* --- cream ladder (type on dark) -------------------------------- */
	--hl-cream:          #F2EAE0;
	--hl-cream-dim:      rgba(242, 234, 224, .62);
	--hl-cream-faint:    rgba(242, 234, 224, .28);

	/* --- accents ---------------------------------------------------- */
	--hl-sun:            #D99A4E;
	--hl-sun-hot:        #F0B063;
	--hl-clay:           #8C5A3C;
	--hl-btn-ink:        #1A1207; /* button label on amber: warmer than --hl-ink */
	--hl-error:          #E0794A;

	/* --- lines ------------------------------------------------------ */
	--hl-line:           rgba(242, 234, 224, .14);
	--hl-line-strong:    rgba(242, 234, 224, .28);

	/* --- type ------------------------------------------------------- */
	--hl-f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--hl-f-body:    "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* --- layout ----------------------------------------------------- */
	--hl-pad:            clamp(20px, 5vw, 72px);
	--hl-wrap:           1400px;
	--hl-wrap-wide:      1500px;
	--hl-wrap-prose:     760px;
	--hl-social-h:       76px;  /* room reserved for the floating social bar */
	--hl-bar-h:          76px;  /* brand bar height */
	--hl-radius:         3px;
	--hl-radius-card:    4px;

	/* --- motion ----------------------------------------------------- */
	--hl-ease:           cubic-bezier(.16, .84, .28, 1);

	/* --- shadows ---------------------------------------------------- */
	--hl-shadow-btn:     0 12px 34px rgba(217, 154, 78, .30);
	--hl-shadow-card:    0 18px 44px rgba(0, 0, 0, .42);

	/* --- scrims ----------------------------------------------------- */
	--hl-scrim: linear-gradient(180deg,
		rgba(11, 9, 8, .72)  0%,
		rgba(11, 9, 8, .34) 42%,
		rgba(11, 9, 8, .92) 100%);
	--hl-scrim-card: linear-gradient(180deg,
		rgba(11, 9, 8, .05) 30%,
		rgba(11, 9, 8, .90) 100%);

	/* --- grain -------------------------------------------------------
	   Inline SVG fractal noise. This is what stops the large flat inks
	   from reading as cheap; render it once, fixed, pointer-events:none.
	   ---------------------------------------------------------------- */
	--hl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");

	/* --- media stand-in ----------------------------------------------
	   Art-directed gradient used by .hl-media when no --hl-img is set,
	   so a slide with no photography still reads as designed.
	   ---------------------------------------------------------------- */
	--hl-media-fallback:
		radial-gradient(120% 90% at 78%  8%, #4A3524 0%, transparent 60%),
		radial-gradient(90%  80% at 12% 92%, #22190F 0%, transparent 65%),
		linear-gradient(160deg, #2C2118 0%, #0D0A08 100%);
}

@media (max-width: 720px) {
	:root {
		--hl-social-h: 70px;
		--hl-bar-h:    64px;
	}
}

/* Elementor global colour/typography bridge.
   Mapping Elementor's four global colours onto the Helios tokens means the
   client can drop a stock Elementor widget onto a page and it inherits the
   design system instead of Elementor's blue defaults. */
:root {
	--e-global-color-primary:   var(--hl-cream);
	--e-global-color-secondary: var(--hl-sun);
	--e-global-color-text:      var(--hl-cream-dim);
	--e-global-color-accent:    var(--hl-sun);
}