@font-face {
	font-family: "Quicksand";
	src: url("../fonts/Quicksand-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
}

:root {
	--pt-purple: #6518f4;
	--pt-purple-dark: #4c0fc4;
	--pt-purple-soft: #ece9ff;
	--pt-lilac: #d9d4f4;
	--pt-pink: #e612d9;
	--pt-black: #050505;
	--pt-ink: #17151d;
	--pt-charcoal: #242229;
	--pt-gray-700: #504d57;
	--pt-gray-500: #77727f;
	--pt-gray-300: #cbc7d1;
	--pt-gray-200: #e4e1e8;
	--pt-gray-100: #f5f3f7;
	--pt-white: #fff;
	--pt-success: #18794e;
	--pt-bg: var(--pt-white);
	--pt-surface: var(--pt-gray-100);
	--pt-surface-elevated: var(--pt-white);
	--pt-text: var(--pt-ink);
	--pt-text-muted: var(--pt-gray-700);
	--pt-border: var(--pt-gray-200);
	--pt-border-strong: var(--pt-gray-300);
	--pt-accent: var(--pt-purple);
	--pt-accent-soft: var(--pt-purple-soft);
	--pt-accent-soft-text: var(--pt-purple-dark);
	--pt-link: var(--pt-purple-dark);
	--pt-link-hover: var(--pt-purple);
	--pt-code-bg: var(--pt-gray-100);
	--pt-placeholder-end: var(--pt-lilac);
	--pt-breadcrumb-color: var(--pt-gray-700);
	--pt-breadcrumb-separator: var(--pt-gray-500);
	--pt-form-bg: var(--pt-white);
	--pt-form-placeholder: var(--pt-gray-500);

	--pt-font-sans: "Quicksand", "Segoe UI", sans-serif;
	--pt-font-display: var(--pt-font-sans);
	--pt-text-xs: .75rem;
	--pt-text-sm: .875rem;
	--pt-text-base: 1rem;
	--pt-text-lg: 1.125rem;
	--pt-text-xl: clamp(1.25rem, 2vw, 1.5rem);
	--pt-text-2xl: clamp(1.75rem, 3vw, 2.5rem);
	--pt-text-3xl: clamp(2.25rem, 5vw, 4.5rem);
	--pt-leading-tight: 1.12;
	--pt-leading-body: 1.7;

	--pt-space-1: .25rem;
	--pt-space-2: .5rem;
	--pt-space-3: .75rem;
	--pt-space-4: 1rem;
	--pt-space-5: 1.5rem;
	--pt-space-6: 2rem;
	--pt-space-7: 3rem;
	--pt-space-8: 4rem;
	--pt-space-9: 6rem;

	--pt-container: 1280px;
	--pt-wide: 1180px;
	--pt-reading: 820px;
	--pt-gutter: clamp(1rem, 4vw, 2.5rem);
	--pt-header-top-height: 82px;
	--pt-header-nav-height: 68px;

	--pt-radius-sm: .5rem;
	--pt-radius-md: .875rem;
	--pt-radius-lg: 1.5rem;
	--pt-radius-pill: 999px;
	--pt-shadow-sm: 0 8px 24px rgba(23, 21, 29, .08);
	--pt-shadow-md: 0 20px 50px rgba(23, 21, 29, .12);
	--pt-brutal-ink: var(--pt-ink);
	--pt-brutal-shadow-sm: 2px 2px 0 var(--pt-brutal-ink);
	--pt-brutal-shadow: 4px 4px 0 var(--pt-brutal-ink);
	--pt-brutal-shadow-lg: 5px 5px 0 var(--pt-brutal-ink);
	--pt-focus: 0 0 0 3px rgba(101, 24, 244, .35);
	--pt-transition-fast: 160ms ease;
	--pt-transition: 260ms cubic-bezier(.2, .7, .2, 1);
	--pt-z-header: 1000;
	--pt-z-menu: 1100;
}

:root[data-pt-theme="dark"] {
	color-scheme: dark;
	--pt-bg: #0f0f0f;
	--pt-surface: #1a181f;
	--pt-surface-elevated: #211f26;
	--pt-text: #f4f1f6;
	--pt-text-muted: #c5becb;
	--pt-border: #3b3741;
	--pt-border-strong: #57515f;
	--pt-accent: #ad8aff;
	--pt-accent-soft: #2d2340;
	--pt-accent-soft-text: #cbb7ff;
	--pt-link: #bea6ff;
	--pt-link-hover: #d5c7ff;
	--pt-code-bg: #25222a;
	--pt-placeholder-end: #3a2d4d;
	--pt-breadcrumb-color: #d0cad5;
	--pt-breadcrumb-separator: #91899a;
	--pt-form-bg: #211f26;
	--pt-form-placeholder: #aaa2b1;
	--pt-shadow-sm: 0 8px 24px rgba(0, 0, 0, .28);
	--pt-shadow-md: 0 20px 50px rgba(0, 0, 0, .4);
	--pt-brutal-ink: #d0cad5;
}