/**
 * Design tokens.
 *
 * The cascade layers are declared here, once, so that file load order never
 * becomes load-bearing. Every colour, size, and easing curve used anywhere in
 * the theme resolves back to a token in this file.
 */

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

@layer tokens {
	:root {
		/* Surfaces — near-black with a cool cast, lifting toward the panels. */
		--dyt-bg: #07070c;
		--dyt-bg-elevated: #101018;
		--dyt-bg-panel: #16161f;
		--dyt-bg-inset: #0c0c13;
		--dyt-bg-contrast: #ffffff;

		/* Brand — violet into blue, used for accents and gradient text. */
		--dyt-brand: #3b6dfb;
		--dyt-brand-strong: #2f5ce0;
		--dyt-brand-soft: #7f9dff;
		--dyt-deep: #1b2a4e;
		--dyt-accent: #1b2a4e;
		--dyt-accent-soft: #60a5fa;
		--dyt-gradient: linear-gradient(120deg, var(--dyt-brand) 0%, var(--dyt-accent) 100%);
		--dyt-gradient-soft: linear-gradient(120deg, color-mix(in srgb, var(--dyt-brand) 18%, transparent) 0%, color-mix(in srgb, var(--dyt-accent) 14%, transparent) 100%);
		--dyt-gradient-wash: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--dyt-brand) 22%, transparent) 0%, transparent 62%);

		/* Text */
		--dyt-text: #ffffff;
		--dyt-text-secondary: rgba(255, 255, 255, 0.72);
		--dyt-text-muted: rgba(255, 255, 255, 0.54);
		--dyt-text-inverse: #0b0b12;

		/* Lines and separators */
		--dyt-border: rgba(255, 255, 255, 0.1);
		--dyt-border-strong: rgba(255, 255, 255, 0.18);

		/* Status */
		--dyt-success: #34d399;
		--dyt-warning: #fbbf24;
		--dyt-danger: #f87171;

		/* Typography — Switzer is licensed free for commercial use by Fontshare.
		   To move to a licensed family, swap the first entry only. */
		--dyt-font-sans: "Switzer", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		--dyt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

		/* Fluid type scale — each step interpolates between phone and desktop. */
		--dyt-text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
		--dyt-text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
		/* Body copy runs 17px on a phone up to 18px on a wide screen. */
		--dyt-text-base: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
		--dyt-text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
		--dyt-text-xl: clamp(1.375rem, 1.28rem + 0.45vw, 1.75rem);
		--dyt-text-2xl: clamp(1.75rem, 1.55rem + 0.95vw, 2.5rem);
		--dyt-text-3xl: clamp(2.25rem, 1.85rem + 1.9vw, 3.5rem);
		/* A section heading has a size of its own rather than borrowing the next
		   step of the scale, so capping it at 48px does not drag the rest with it. */
		--dyt-text-section: clamp(2rem, 1.55rem + 1.9vw, 3rem);
		--dyt-text-4xl: clamp(2.75rem, 2.05rem + 3.2vw, 4.75rem);

		--dyt-leading-tight: 1.1;
		--dyt-leading-snug: 1.28;
		--dyt-leading-normal: 1.6;
		--dyt-leading-relaxed: 1.75;

		--dyt-tracking-tight: -0.03em;
		--dyt-tracking-snug: -0.015em;
		--dyt-tracking-wide: 0.08em;

		/* Spacing — 8pt base with fluid section rhythm. */
		--dyt-space-1: 0.25rem;
		--dyt-space-2: 0.5rem;
		--dyt-space-3: 0.75rem;
		--dyt-space-4: 1rem;
		--dyt-space-5: 1.5rem;
		--dyt-space-6: 2rem;
		--dyt-space-7: 2.5rem;
		--dyt-space-8: 3rem;
		--dyt-space-9: 4rem;
		--dyt-space-10: 5rem;
		--dyt-space-11: 6.5rem;
		--dyt-space-12: 8rem;

		--dyt-section-y: clamp(3.5rem, 2.4rem + 5vw, 7rem);
		--dyt-section-y-compact: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
		--dyt-section-y-roomy: clamp(5rem, 3.4rem + 7vw, 10rem);

		/* Structure — the default container matches the header bar width so
		   section content lines up with the logo and nav above it. */
		--dyt-container: 1480px;
		--dyt-container-narrow: 760px;
		--dyt-container-wide: 1680px;
		--dyt-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

		/* Radii */
		--dyt-radius-sm: 8px;
		--dyt-radius: 14px;
		--dyt-radius-lg: 22px;
		--dyt-radius-xl: 32px;
		--dyt-radius-pill: 999px;

		/* Elevation */
		--dyt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--dyt-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
		--dyt-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55);
		--dyt-glow: 0 0 0 1px color-mix(in srgb, var(--dyt-brand) 35%, transparent), 0 18px 50px color-mix(in srgb, var(--dyt-brand) 28%, transparent);

		/* Motion */
		--dyt-ease: cubic-bezier(0.22, 1, 0.36, 1);
		--dyt-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
		--dyt-duration-fast: 140ms;
		--dyt-duration: 260ms;
		--dyt-duration-slow: 520ms;

		/* Layering */
		--dyt-z-base: 1;
		--dyt-z-sticky: 50;
		--dyt-z-header: 100;
		--dyt-z-overlay: 200;
		--dyt-z-modal: 300;

		--dyt-header-height: 68px;

		/* Header — a floating navy bar sitting over the page background.
		   Overridable from Dytona → Theme Settings. */
		--dyt-header-bg: #1b2a4e;
		--dyt-header-text: #ffffff;
		--dyt-header-width: 1480px;
		--dyt-header-inset: clamp(0.5rem, 0.2rem + 1.2vw, 1.25rem);

		--dyt-heading-weight: 600;

		color-scheme: dark;
	}

	/* The design commits to a dark surface. The light block below only kicks in
	   for visitors who have explicitly asked for a light UI, keeping contrast
	   legible rather than rendering white text on white. */
	@media (prefers-color-scheme: light) {
		:root:not([data-dyt-theme="dark"]) {
			--dyt-bg: #f6f6fa;
			--dyt-bg-elevated: #ffffff;
			--dyt-bg-panel: #ffffff;
			--dyt-bg-inset: #eeeef4;
			--dyt-bg-contrast: #0b0b12;
			--dyt-text: #0b0b12;
			--dyt-text-secondary: rgba(11, 11, 18, 0.72);
			--dyt-text-muted: rgba(11, 11, 18, 0.56);
			--dyt-text-inverse: #ffffff;
			--dyt-border: rgba(11, 11, 18, 0.12);
			--dyt-border-strong: rgba(11, 11, 18, 0.2);
			--dyt-gradient-wash: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--dyt-brand) 14%, transparent) 0%, transparent 62%);
			--dyt-shadow: 0 12px 32px rgba(11, 11, 18, 0.1);
			--dyt-shadow-lg: 0 28px 70px rgba(11, 11, 18, 0.14);

			color-scheme: light;
		}
	}
}