@layer config, theme, reset, base, utils, components, helpers;

@font-face {
	font-family: "Inter";
	src:
		local("Inter Regular"),
		local("Inter-Regular"),
		url("/assets/fonts/Inter-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Inter";
	src:
		local("Inter SemiBold"),
		local("Inter-SemiBold"),
		url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "ArchivoExpandedBlack";
	src:
		local("Archivo Expanded Black"),
		local("ArchivoExpanded-Black"),
		url("/assets/fonts/Archivo_Expanded-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: fallback;
}

@layer config {
	:root {
		/* Typography */

		--font-family-mono: monospace;
		--font-family-sans: "Inter", system-ui, sans-serif;
		--font-family-serif: "Georgia", serif;
		--font-family-heading: "ArchivoExpandedBlack", sans-serif;
		--font-family-default: var(--font-family-sans);

		--font-weight-default: 400;
		--font-weight-heading: 900;
		--font-weight-active: 600;
		--font-weight-strong: 600;

		--line-height-large: 1.85;
		--line-height-base: 1.65;
		--line-height-small: 1.1;

		--tracking-base: 0em;
		--tracking-tight: -0.02ch;
		--tracking-wide: 0.03ch;

		--measure-large: 80ch;
		--measure-base: 65ch;
		--measure-small: 28ch;

		--font-size-smallest: 0.8rem;
		--font-size-small: 0.9rem;
		--font-size-base: 1rem;
		--font-size-medium: 1.2rem;
		--font-size-large: 1.44rem;
		--font-size-largest: 1.78rem;
		--font-size-display: 2.07rem;


        @media (min-width: 375px) {
		--font-size-smallest: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
		--font-size-small: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
		--font-size-base: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
		--font-size-medium: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
		--font-size-large: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
		--font-size-largest: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
		--font-size-display: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);

        }
	}
}

/*Colors */
@layer config {
	:root {
		/* Transparency */
		--transparency-weaker: 0.8;

		/* Spacing */

		--spacing-tiny: 0.125rem;
		--spacing-nearest: 0.25rem;
		--spacing-near: 0.5rem;
		--spacing-base: 1rem;
		--spacing-far: 3rem;
		--spacing-farthest: 6rem;

		/* Borders */

		--border-width-thin: 1px;
		--border-width-medium: 2px;
		--border-width-thick: 4px;

		--border-radius-none: 0px;
		--border-radius-small: 0px;
		--border-radius-medium: 0px;
		--border-radius-large: 0px;
		--border-radius-round: 0px;

		/* UI Density Elements */

		--control-height-base: 3em;
		--control-height-small: 2em;

		--control-spacing-minimal: 0.125em;
		--control-spacing-tiny: 0.25em;
		--control-spacing-nearest: 0.375em;
		--control-spacing-near: 0.5em;
		--control-spacing-base: 1em;
		--control-spacing-far: 1.5em;
		--control-spacing-farthest: 2.25em;

		/* SHADOWS */

		--shadow-box:
			0.4px 0.8px 1px 0px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 68%
			), inset -0.4px 0.8px 1px 0px color-mix(
				in oklch,
				var(--color-surface-base),
				transparent 68%
			), inset 0.4px 0.8px 1px 0px color-mix(
				in oklch,
				var(--color-surface-base),
				transparent 68%
			);
		--shadow-inset: inset 0.4px 0.8px 1px 0px
			color-mix(in oklch, var(--shadow-color), transparent 68%);
		--shadow-nearest: 0.4px 0.8px 1px 0px
			color-mix(in oklch, var(--shadow-color), transparent 68%);
		--shadow-near:
			0.4px 0.8px 1px 0px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 68%
			), 0.7px 1.4px 1.8px -0.5px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 72.8%
			), 1.3px 2.6px 3.4px -1px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 76.9%
			);
		--shadow-medium:
			0.4px 0.8px 1px 0px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 68%
			), 0.7px 1.4px 1.8px -0.5px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 72.8%
			), 1.3px 2.6px 3.4px -1px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 76.9%
			), 2.4px 4.7px 6.1px -1.5px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 80.3%
			), 4.2px 8.4px 10.9px -2px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 83.3%
			);
		--shadow-far:
			0.4px 0.8px 1px 0px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 68%
			), 0.7px 1.4px 1.8px -0.5px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 72.8%
			), 1.3px 2.6px 3.4px -1px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 76.9%
			), 2.4px 4.7px 6.1px -1.5px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 80.3%
			), 4.2px 8.4px 10.9px -2px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 83.3%
			), 7.6px 15.1px 19.6px -2.5px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 85.8%
			), 13.6px 27.2px 35.4px -3px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 87.9%
			), 24.5px 49px 63.7px -3.5px color-mix(
				in oklch,
				var(--shadow-color),
				transparent 89.7%
			);
		/* Light Theme */

		--shadow-color-light: oklch(80% 0.03 129.2);
		--shadow-color-light-lch: 80% 0.03 129.2;

		/* Dark Theme */

		--shadow-color-dark: oklch(30% 0.05 129.2);
		--shadow-color-dark-lch: 30% 0.05 129.2;

		--lightness-max: 1;
		--lightness-min: 0.03;
		--neutral-chroma-scale: 1;
		--c-brand-primary: 0.182;
		--h-brand-primary: 129.2;
		--l-brand-primary-light: 0.92;
		--color-brand-primary-base-light: oklch(
			var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary)
		);
		--color-brand-primary-emphasis-light: oklch(
			from var(--color-brand-primary-base-light) calc(l * 0.85) calc(c * 1.1) h
		);
		--color-brand-primary-surface-light: oklch(
			from var(--color-brand-primary-base-light)
				calc(var(--lightness-max) - 0.1 + l / 10) calc(c * 0.25) h
		);
		--color-brand-primary-contrast-light: oklch(
			from var(--color-brand-primary-base-light) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-brand-primary-hover-light: oklch(
			from var(--color-brand-primary-base-light) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--l-brand-primary-dark: 0.92;
		--color-brand-primary-base-dark: oklch(
			var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary)
		);
		--color-brand-primary-emphasis-dark: oklch(
			from var(--color-brand-primary-base-dark) calc(l * 1.25) calc(c * 1.1) h
		);
		--color-brand-primary-surface-dark: oklch(
			from var(--color-brand-primary-base-dark)
				calc(var(--lightness-min) + l / 3) calc(c * 0.25) h
		);
		--color-brand-primary-contrast-dark: oklch(
			from var(--color-brand-primary-base-dark) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-brand-primary-hover-dark: oklch(
			from var(--color-brand-primary-base-dark) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--c-brand-secondary: 0.21;
		--h-brand-secondary: 345.7;
		--l-brand-secondary-light: 0.73;
		--color-brand-secondary-base-light: oklch(
			var(--l-brand-secondary-light) var(--c-brand-secondary)
				var(--h-brand-secondary)
		);
		--color-brand-secondary-emphasis-light: oklch(
			from var(--color-brand-secondary-base-light) calc(l * 0.85) calc(c * 1.1)
				h
		);
		--color-brand-secondary-surface-light: oklch(
			from var(--color-brand-secondary-base-light)
				calc(var(--lightness-max) - 0.1 + l / 10) calc(c * 0.25) h
		);
		--color-brand-secondary-contrast-light: oklch(
			from var(--color-brand-secondary-base-light) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-brand-secondary-hover-light: oklch(
			from var(--color-brand-secondary-base-light) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--l-brand-secondary-dark: 0.73;
		--color-brand-secondary-base-dark: oklch(
			var(--l-brand-secondary-dark) var(--c-brand-secondary)
				var(--h-brand-secondary)
		);
		--color-brand-secondary-emphasis-dark: oklch(
			from var(--color-brand-secondary-base-dark) calc(l * 1.25) calc(c * 1.1) h
		);
		--color-brand-secondary-surface-dark: oklch(
			from var(--color-brand-secondary-base-dark)
				calc(var(--lightness-min) + l / 3) calc(c * 0.25) h
		);
		--color-brand-secondary-contrast-dark: oklch(
			from var(--color-brand-secondary-base-dark) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-brand-secondary-hover-dark: oklch(
			from var(--color-brand-secondary-base-dark) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--l-text-light: 0.08;
		--c-text-light: 0.02;
		--h-text-light: var(--h-brand-primary);
		--scale-text-light: 1.75;
		--color-text-base-light: oklch(
			var(--l-text-light) var(--c-text-light) var(--h-text-light)
		);
		--color-text-muted-light: oklch(
			from var(--color-text-base-light) calc(l * var(--scale-text-light))
				calc(c * var(--neutral-chroma-scale)) h
		);
		--color-text-subtle-light: oklch(
			from var(--color-text-base-light)
				calc(l * var(--scale-text-light) * var(--scale-text-light))
				calc(c * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) h
		);
		--color-text-on-emphasis-light: oklch(
			from var(--color-text-base-light) var(--lightness-max) calc(c * 0.1) h
		);
		--color-text-hover-light: oklch(
			from var(--color-text-base-light) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--l-text-dark: 0.97;
		--c-text-dark: 0.005;
		--h-text-dark: var(--h-brand-primary);
		--scale-text-dark: 0.95;
		--color-text-base-dark: oklch(
			var(--l-text-dark) var(--c-text-dark) var(--h-text-dark)
		);
		--color-text-muted-dark: oklch(
			from var(--color-text-base-dark) calc(l * var(--scale-text-dark))
				calc(c * var(--neutral-chroma-scale)) h
		);
		--color-text-subtle-dark: oklch(
			from var(--color-text-base-dark)
				calc(l * var(--scale-text-dark) * var(--scale-text-dark))
				calc(c * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) h
		);
		--color-text-on-emphasis-dark: oklch(
			from var(--color-text-base-dark) var(--lightness-min) c h
		);
		--color-text-hover-dark: oklch(
			from var(--color-text-base-dark) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--l-surface-light: 1;
		--c-surface-light: 0.002;
		--h-surface-light: var(--h-brand-primary);
		--scale-surface-light: 0.987;
		--color-surface-base-light: oklch(
			var(--l-surface-light) var(--c-surface-light) var(--h-surface-light)
		);
		--color-surface-muted-light: oklch(
			from var(--color-surface-base-light) calc(l * var(--scale-surface-light))
				calc(c * var(--neutral-chroma-scale)) h
		);
		--color-surface-subtle-light: oklch(
			from var(--color-surface-base-light)
				calc(l * var(--scale-surface-light) * var(--scale-surface-light))
				calc(c * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) h
		);
		--color-surface-emphasis-light: oklch(
			from var(--color-surface-base-light) var(--lightness-min) c h
		);
		--l-surface-dark: 0.1;
		--c-surface-dark: 0.001;
		--h-surface-dark: var(--h-brand-primary);
		--scale-surface-dark: 1.7;
		--color-surface-base-dark: oklch(
			var(--l-surface-dark) var(--c-surface-dark) var(--h-surface-dark)
		);
		--color-surface-muted-dark: oklch(
			from var(--color-surface-base-dark) calc(l * var(--scale-surface-dark))
				calc(c * var(--neutral-chroma-scale)) h
		);
		--color-surface-subtle-dark: oklch(
			from var(--color-surface-base-dark)
				calc(l * var(--scale-surface-dark) * var(--scale-surface-dark))
				calc(c * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) h
		);
		--color-surface-emphasis-dark: oklch(
			from var(--color-surface-base-dark) var(--lightness-max) calc(c * 0.1) h
		);
		--l-border-light: 0.92;
		--c-border-light: 0.182;
		--h-border-light: var(--h-brand-primary);
		--scale-border-light: 1.1;
		--color-border-base-light: oklch(
			var(--l-border-light) var(--c-border-light) var(--h-border-light)
		);
		--color-border-muted-light: oklch(
			from var(--color-border-base-light) calc(l * var(--scale-border-light))
				calc(c * var(--neutral-chroma-scale)) h
		);
		--color-border-subtle-light: oklch(
			from var(--color-border-base-light)
				calc(l * var(--scale-border-light) * var(--scale-border-light))
				calc(c * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) h
		);
		--color-border-on-emphasis-light: oklch(
			from var(--color-border-base-light) var(--lightness-max) c h
		);
		--color-border-hover-light: oklch(
			from var(--color-border-base-light) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--l-border-dark: 0.92;
		--c-border-dark: 0.182;
		--scale-border-dark: 0.9;
		--h-border-dark: var(--h-brand-primary);
		--color-border-base-dark: oklch(
			var(--l-border-dark) var(--c-border-dark) var(--h-border-dark)
		);
		--color-border-muted-dark: oklch(
			from var(--color-border-base-dark) calc(l * var(--scale-border-dark))
				calc(c * var(--neutral-chroma-scale)) h
		);
		--color-border-subtle-dark: oklch(
			from var(--color-border-base-dark)
				calc(l * var(--scale-border-dark) * var(--scale-border-dark))
				calc(c * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) h
		);
		--color-border-on-emphasis-dark: oklch(
			from var(--color-border-base-dark) var(--lightness-max) c h
		);
		--color-border-hover-dark: oklch(
			from var(--color-border-base-dark) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--c-status-success: 0.182;
		--h-status-success: 142;
		--l-status-success-light: 0.92;
		--color-status-success-base-light: oklch(
			var(--l-status-success-light) var(--c-status-success)
				var(--h-status-success)
		);
		--color-status-success-emphasis-light: oklch(
			from var(--color-status-success-base-light) calc(l * 0.85) calc(c * 1.1) h
		);
		--color-status-success-surface-light: oklch(
			from var(--color-status-success-base-light)
				calc(var(--lightness-max) - 0.1 + l / 10) calc(c * 0.25) h
		);
		--color-status-success-contrast-light: oklch(
			from var(--color-status-success-base-light) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-status-success-hover-light: oklch(
			from var(--color-status-success-base-light) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--l-status-success-dark: 0.92;
		--color-status-success-base-dark: oklch(
			var(--l-status-success-dark) var(--c-status-success)
				var(--h-status-success)
		);
		--color-status-success-emphasis-dark: oklch(
			from var(--color-status-success-base-dark) calc(l * 1.25) calc(c * 1.1) h
		);
		--color-status-success-surface-dark: oklch(
			from var(--color-status-success-base-dark)
				calc(var(--lightness-min) + l / 3) calc(c * 0.25) h
		);
		--color-status-success-contrast-dark: oklch(
			from var(--color-status-success-base-dark) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-status-success-hover-dark: oklch(
			from var(--color-status-success-base-dark) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--c-status-warning: 0.182;
		--h-status-warning: 97;
		--l-status-warning-light: 0.92;
		--color-status-warning-base-light: oklch(
			var(--l-status-warning-light) var(--c-status-warning)
				var(--h-status-warning)
		);
		--color-status-warning-emphasis-light: oklch(
			from var(--color-status-warning-base-light) calc(l * 0.85) calc(c * 1.1) h
		);
		--color-status-warning-surface-light: oklch(
			from var(--color-status-warning-base-light)
				calc(var(--lightness-max) - 0.1 + l / 10) calc(c * 0.25) h
		);
		--color-status-warning-contrast-light: oklch(
			from var(--color-status-warning-base-light) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-status-warning-hover-light: oklch(
			from var(--color-status-warning-base-light) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--l-status-warning-dark: 0.92;
		--color-status-warning-base-dark: oklch(
			var(--l-status-warning-dark) var(--c-status-warning)
				var(--h-status-warning)
		);
		--color-status-warning-emphasis-dark: oklch(
			from var(--color-status-warning-base-dark) calc(l * 1.25) calc(c * 1.1) h
		);
		--color-status-warning-surface-dark: oklch(
			from var(--color-status-warning-base-dark)
				calc(var(--lightness-min) + l / 3) calc(c * 0.25) h
		);
		--color-status-warning-contrast-dark: oklch(
			from var(--color-status-warning-base-dark) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-status-warning-hover-dark: oklch(
			from var(--color-status-warning-base-dark) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--c-status-danger: 0.182;
		--h-status-danger: 32;
		--l-status-danger-light: 0.92;
		--color-status-danger-base-light: oklch(
			var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger)
		);
		--color-status-danger-emphasis-light: oklch(
			from var(--color-status-danger-base-light) calc(l * 0.85) calc(c * 1.1) h
		);
		--color-status-danger-surface-light: oklch(
			from var(--color-status-danger-base-light)
				calc(var(--lightness-max) - 0.1 + l / 10) calc(c * 0.25) h
		);
		--color-status-danger-contrast-light: oklch(
			from var(--color-status-danger-base-light) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-status-danger-hover-light: oklch(
			from var(--color-status-danger-base-light) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--l-status-danger-dark: 0.92;
		--color-status-danger-base-dark: oklch(
			var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger)
		);
		--color-status-danger-emphasis-dark: oklch(
			from var(--color-status-danger-base-dark) calc(l * 1.25) calc(c * 1.1) h
		);
		--color-status-danger-surface-dark: oklch(
			from var(--color-status-danger-base-dark)
				calc(var(--lightness-min) + l / 3) calc(c * 0.25) h
		);
		--color-status-danger-contrast-dark: oklch(
			from var(--color-status-danger-base-dark) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-status-danger-hover-dark: oklch(
			from var(--color-status-danger-base-dark) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--c-status-info: 0.182;
		--h-status-info: 245;
		--l-status-info-light: 0.92;
		--color-status-info-base-light: oklch(
			var(--l-status-info-light) var(--c-status-info) var(--h-status-info)
		);
		--color-status-info-emphasis-light: oklch(
			from var(--color-status-info-base-light) calc(l * 0.85) calc(c * 1.1) h
		);
		--color-status-info-surface-light: oklch(
			from var(--color-status-info-base-light)
				calc(var(--lightness-max) - 0.1 + l / 10) calc(c * 0.25) h
		);
		--color-status-info-contrast-light: oklch(
			from var(--color-status-info-base-light) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-status-info-hover-light: oklch(
			from var(--color-status-info-base-light) l c h /
			calc(var(--transparency-weaker) / 10)
		);
		--l-status-info-dark: 0.92;
		--color-status-info-base-dark: oklch(
			var(--l-status-info-dark) var(--c-status-info) var(--h-status-info)
		);
		--color-status-info-emphasis-dark: oklch(
			from var(--color-status-info-base-dark) calc(l * 1.25) calc(c * 1.1) h
		);
		--color-status-info-surface-dark: oklch(
			from var(--color-status-info-base-dark) calc(var(--lightness-min) + l / 3)
				calc(c * 0.25) h
		);
		--color-status-info-contrast-dark: oklch(
			from var(--color-status-info-base-dark) var(--lightness-min)
				calc(c * 0.25) h
		);
		--color-status-info-hover-dark: oklch(
			from var(--color-status-info-base-dark) l c h /
			calc(var(--transparency-weaker) / 10)
		);
	}
}