/**
 * Utopia Fluid Type & Space Scale
 * Container: 320px to 1440px
 * Type: 14px/1.125 to 16px/1.22
 * Space: 14px to 18px base
 * Uses container query units (cqi)
 * @see https://utopia.fyi
 */

body {
	container-type: inline-size;
}

:root {
	/* ========================================
	   Typography Scale
	   Min: 14px base, 1.125 ratio
	   Max: 16px base, 1.22 ratio
	   ======================================== */

	--step--2: clamp(0.67rem, 0.7rem - 0.03cqi, 0.69rem);
	--step--1: clamp(0.78rem, 0.77rem + 0.06cqi, 0.82rem);
	--step-0: clamp(0.875rem, 0.84rem + 0.18cqi, 1rem);
	--step-1: clamp(0.98rem, 0.92rem + 0.34cqi, 1.22rem);
	--step-2: clamp(1.11rem, 1rem + 0.54cqi, 1.49rem);
	--step-3: clamp(1.25rem, 1.08rem + 0.81cqi, 1.82rem);
	--step-4: clamp(1.4rem, 1.17rem + 1.16cqi, 2.22rem);
	--step-5: clamp(1.58rem, 1.26rem + 1.61cqi, 2.7rem);
	--step-6: clamp(1.77rem, 1.34rem + 2.18cqi, 3.3rem);
	--step-7: clamp(2rem, 1.42rem + 2.9cqi, 4.02rem);
	--step-8: clamp(2.25rem, 1.48rem + 3.8cqi, 4.91rem);
	--step-9: clamp(2.53rem, 1.54rem + 4.95cqi, 5.99rem);

	/* ========================================
	   Space Scale - Single values
	   Base: 14px to 18px
	   ======================================== */

	--space-3xs: clamp(0.22rem, 0.2rem + 0.09cqi, 0.28rem);
	--space-2xs: clamp(0.44rem, 0.4rem + 0.18cqi, 0.56rem);
	--space-xs: clamp(0.66rem, 0.6rem + 0.27cqi, 0.84rem);
	--space-s: clamp(0.88rem, 0.8rem + 0.36cqi, 1.13rem);
	--space-m: clamp(1.31rem, 1.21rem + 0.54cqi, 1.69rem);
	--space-l: clamp(1.75rem, 1.61rem + 0.71cqi, 2.25rem);
	--space-xl: clamp(2.63rem, 2.41rem + 1.07cqi, 3.38rem);
	--space-2xl: clamp(3.5rem, 3.21rem + 1.43cqi, 4.5rem);
	--space-3xl: clamp(5.25rem, 4.82rem + 2.14cqi, 6.75rem);
	--space-4xl: clamp(7.88rem, 7.23rem + 3.21cqi, 10.13rem);
	--space-5xl: clamp(11.38rem, 10.45rem + 4.64cqi, 14.63rem);

	/* ========================================
	   Space Scale - One-up pairs
	   ======================================== */

	--space-3xs-2xs: clamp(0.22rem, 0.12rem + 0.49cqi, 0.56rem);
	--space-2xs-xs: clamp(0.44rem, 0.32rem + 0.58cqi, 0.84rem);
	--space-xs-s: clamp(0.66rem, 0.52rem + 0.67cqi, 1.13rem);
	--space-s-m: clamp(0.88rem, 0.64rem + 1.16cqi, 1.69rem);
	--space-m-l: clamp(1.31rem, 1.04rem + 1.34cqi, 2.25rem);
	--space-l-xl: clamp(1.75rem, 1.29rem + 2.32cqi, 3.38rem);
	--space-xl-2xl: clamp(2.63rem, 2.09rem + 2.68cqi, 4.5rem);
	--space-2xl-3xl: clamp(3.5rem, 2.57rem + 4.64cqi, 6.75rem);
	--space-3xl-4xl: clamp(5.25rem, 3.86rem + 6.96cqi, 10.13rem);
	--space-4xl-5xl: clamp(7.88rem, 5.95rem + 9.64cqi, 14.63rem);

	/* ========================================
	   Space Scale - Two-up pairs
	   ======================================== */

	--space-3xs-xs: clamp(0.22rem, 0.04rem + 0.89cqi, 0.84rem);
	--space-2xs-s: clamp(0.44rem, 0.24rem + 0.98cqi, 1.13rem);
	--space-xs-m: clamp(0.66rem, 0.36rem + 1.47cqi, 1.69rem);
	--space-s-l: clamp(0.88rem, 0.48rem + 1.96cqi, 2.25rem);
	--space-m-xl: clamp(1.31rem, 0.72rem + 2.95cqi, 3.38rem);
	--space-l-2xl: clamp(1.75rem, 0.96rem + 3.93cqi, 4.5rem);
	--space-xl-3xl: clamp(2.63rem, 1.45rem + 5.89cqi, 6.75rem);
	--space-2xl-4xl: clamp(3.5rem, 1.61rem + 9.46cqi, 10.13rem);
	--space-3xl-5xl: clamp(5.25rem, 2.57rem + 13.39cqi, 14.63rem);

	/* ========================================
	   Space Scale - Three-up pairs
	   ======================================== */

	--space-3xs-s: clamp(0.22rem, -0.04rem + 1.29cqi, 1.13rem);
	--space-2xs-m: clamp(0.44rem, 0.08rem + 1.79cqi, 1.69rem);
	--space-xs-l: clamp(0.66rem, 0.2rem + 2.28cqi, 2.25rem);
	--space-s-xl: clamp(0.88rem, 0.16rem + 3.57cqi, 3.38rem);
	--space-m-2xl: clamp(1.31rem, 0.4rem + 4.55cqi, 4.5rem);
	--space-l-3xl: clamp(1.75rem, 0.32rem + 7.14cqi, 6.75rem);
	--space-xl-4xl: clamp(2.63rem, 0.48rem + 10.71cqi, 10.13rem);
	--space-2xl-5xl: clamp(3.5rem, 0.32rem + 15.89cqi, 14.63rem);

	/* ========================================
	   Semantic spacing aliases
	   ======================================== */

	--space-gutter: var(--space-s-m);
	--space-section: var(--space-2xl-3xl);
	--space-flow: var(--space-m-l);
	--space-region: var(--space-xl-3xl);

	/* ========================================
	   Semantic Color Tokens
	   ======================================== */

	/* Text colors */
	--color-text-primary: #111827;
	--color-text-secondary: #4B5563;
	--color-text-muted: #9CA3AF;
	--color-text-inverse: #FFFFFF;
	--color-text-accent: #2563EB;

	/* Background colors */
	--color-bg-primary: #FFFFFF;
	--color-bg-secondary: #ECF4FF;
	--color-bg-tertiary: #F3F4F6;
	--color-bg-inverse: #0f172a;
	--color-bg-inverse-subtle: #1e293b;

	/* Brand colors */
	--color-brand-primary: #2563EB;
	--color-brand-primary-hover: #1D4ED8;
	--color-brand-primary-light: #DBEAFE;
	--color-brand-primary-dark: #1E3A8A;

	/* UI colors */
	--color-border-default: #E5E7EB;
	--color-border-subtle: #F3F4F6;
	--color-border-strong: #9CA3AF;

	/* State colors */
	--color-success: #16a34a;
	--color-warning: #ca8a04;
	--color-error: #dc2626;
	--color-info: #0EA5E9;
}