@layer reset, base, layout, components, utilities;

:root {
	color-scheme: dark;

	/* Brand palette. Purple leads; pink is reserved for rare points of emphasis. */
	--fg-brand-primary: #6256ed;
	--fg-brand-primary-hover: color-mix(in srgb, var(--fg-brand-primary) 94%, black);
	--fg-brand-primary-active: color-mix(in srgb, var(--fg-brand-primary) 88%, black);
	--fg-brand-secondary: #f350bc;

	/* Dark foundation. */
	--fg-dark-background: #0a0a0d;
	--fg-dark-surface-elevated: #101014;
	--fg-dark-surface-secondary: #17171d;
	--fg-dark-border: #24242c;
	--fg-dark-border-strong: #62606c;
	--fg-dark-text-primary: #f4f3f7;
	--fg-dark-text-secondary: #a5a3ad;
	--fg-dark-text-tertiary: #7f7d87;

	/* Light foundation, ready for deliberately light sections in later phases. */
	--fg-light-background: #f5f4f0;
	--fg-light-surface-elevated: #ffffff;
	--fg-light-surface-secondary: #eceae5;
	--fg-light-border: #dad8d3;
	--fg-light-border-strong: #bbb8b1;
	--fg-light-text-primary: #15151a;
	--fg-light-text-secondary: #65636b;
	--fg-light-text-tertiary: #85828a;

	/* Active semantic colors. */
	--fg-color-background: var(--fg-dark-background);
	--fg-color-surface-elevated: var(--fg-dark-surface-elevated);
	--fg-color-surface-secondary: var(--fg-dark-surface-secondary);
	--fg-color-border: var(--fg-dark-border);
	--fg-color-border-strong: var(--fg-dark-border-strong);
	--fg-color-text: var(--fg-dark-text-primary);
	--fg-color-text-muted: var(--fg-dark-text-secondary);
	--fg-color-text-subtle: var(--fg-dark-text-tertiary);
	--fg-color-focus: var(--fg-brand-primary);
	--fg-color-on-brand: #ffffff;
	--fg-color-header-scrolled: rgb(10 10 13 / 94%);
	--fg-color-menu-overlay: var(--fg-dark-background);
	--fg-color-backdrop: rgb(0 0 0 / 64%);
	--fg-color-interactive-tint: color-mix(in srgb, var(--fg-brand-primary) 10%, transparent);
	--fg-color-selection: color-mix(in srgb, var(--fg-brand-primary) 72%, black);

	/* Container and grid system. */
	--fg-container-visual: 95rem;
	--fg-container-main: 85rem;
	--fg-container-reading: 50rem;
	--fg-container-wide: var(--fg-container-main);
	--fg-container-content: var(--fg-container-reading);
	--fg-container-gutter: 1.25rem;
	--fg-grid-columns: 4;
	--fg-grid-gap: 1rem;

	/* Spacing: a disciplined 4px-based scale plus section-level rhythm. */
	--fg-space-0: 0;
	--fg-space-1: 0.25rem;
	--fg-space-2: 0.5rem;
	--fg-space-3: 0.75rem;
	--fg-space-4: 1rem;
	--fg-space-5: 1.5rem;
	--fg-space-6: 2rem;
	--fg-space-7: 3rem;
	--fg-space-8: 4rem;
	--fg-space-9: 5rem;
	--fg-space-10: 6rem;
	--fg-space-11: 7rem;
	--fg-space-12: 8rem;
	--fg-space-13: 9rem;
	--fg-section-space-compact: clamp(3.5rem, 2.8rem + 2.8vw, 5rem);
	--fg-section-space-standard: clamp(5rem, 3.8rem + 4.5vw, 7rem);
	--fg-section-space-large: clamp(7rem, 5.5rem + 5vw, 9rem);

	/* Inter Tight is self-hosted; the remaining faces are resilient fallbacks. */
	--fg-font-sans: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--fg-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
	--fg-font-size-xs: 0.75rem;
	--fg-font-size-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--fg-font-size-body: clamp(1.0625rem, 1.01rem + 0.21vw, 1.1875rem);
	--fg-font-size-lg: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
	--fg-font-size-xl: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
	--fg-font-size-section: clamp(2.5rem, 1.95rem + 2.15vw, 3.75rem);
	--fg-font-size-display: clamp(2.875rem, 1.98rem + 3.6vw, 4.875rem);
	--fg-font-size-2xl: var(--fg-font-size-section);
	--fg-line-height-display: 0.98;
	--fg-line-height-tight: 1.08;
	--fg-line-height-heading: 1.16;
	--fg-line-height-body: 1.58;
	--fg-font-weight-regular: 400;
	--fg-font-weight-medium: 500;
	--fg-font-weight-semibold: 600;
	--fg-letter-spacing-display: -0.052em;
	--fg-letter-spacing-heading: -0.032em;
	--fg-letter-spacing-body: -0.012em;
	--fg-letter-spacing-meta: 0.11em;

	/* Restrained geometry. */
	--fg-radius-none: 0;
	--fg-radius-xs: 0.1875rem;
	--fg-radius-sm: 0.25rem;
	--fg-radius-md: 0.4375rem;
	--fg-radius-lg: 0.625rem;
	--fg-border-width: 1px;
	--fg-border-style: solid;
	--fg-border: var(--fg-border-width) var(--fg-border-style) var(--fg-color-border);

	/* Header sizing. */
	--fg-header-height: 5rem;
	--fg-header-height-scrolled: 4.5rem;

	/* Motion remains quiet and functional. */
	--fg-duration-fast: 140ms;
	--fg-duration-standard: 220ms;
	--fg-duration-slow: 360ms;
	--fg-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--fg-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);

	/* Layering. */
	--fg-z-base: 0;
	--fg-z-header: 100;
	--fg-z-dropdown: 140;
	--fg-z-overlay: 500;
	--fg-z-modal: 1000;
	--fg-z-skip-link: 1100;
}

@media (min-width: 48rem) {
	:root {
		--fg-container-gutter: 2rem;
		--fg-grid-columns: 8;
		--fg-grid-gap: 1.5rem;
		--fg-header-height: 5.5rem;
		--fg-header-height-scrolled: 4.75rem;
	}
}

@media (min-width: 64rem) {
	:root {
		--fg-container-gutter: 3.5rem;
		--fg-grid-columns: 12;
		--fg-grid-gap: 1.75rem;
		--fg-header-height: 6rem;
		--fg-header-height-scrolled: 4.75rem;
	}
}

@media (min-width: 90rem) {
	:root {
		--fg-container-gutter: 4.5rem;
		--fg-grid-gap: 2rem;
	}
}

[data-color-scheme="light"] {
	color-scheme: light;
	--fg-color-background: var(--fg-light-background);
	--fg-color-surface-elevated: var(--fg-light-surface-elevated);
	--fg-color-surface-secondary: var(--fg-light-surface-secondary);
	--fg-color-border: var(--fg-light-border);
	--fg-color-border-strong: var(--fg-light-border-strong);
	--fg-color-text: var(--fg-light-text-primary);
	--fg-color-text-muted: var(--fg-light-text-secondary);
	--fg-color-text-subtle: var(--fg-light-text-tertiary);
	--fg-color-focus: var(--fg-brand-primary);
}