/*
 * Design tokens. Components reference these names.
 * The --theme-* assignments hand the same colors to Blocksy.
 */

:root {
	--vt-purple: #6d28d9;
	--vt-purple-rich: #5b21b6;
	--vt-purple-deep: #4c1d95;
	--vt-purple-bright: #7c3aed;
	--vt-electric: #c084fc;
	--vt-violet: #2e1065;
	--vt-indigo: #4338ca;
	--vt-indigo-deep: #312e81;
	--vt-blue: #2563eb;
	--vt-blue-bright: #60a5fa;

	--vt-night: #160d28;
	--vt-night-raised: #241838;
	--vt-night-soft: #1a0b2e;

	--vt-canvas: #f6f3fb;
	--vt-surface: #ffffff;
	--vt-surface-muted: #efeaf8;
	--vt-ink: #1c1430;
	--vt-ink-soft: #4a415f;
	--vt-heading: #140b24;
	--vt-on-night: #f7f3ff;
	--vt-on-night-soft: #d4c6ee;
	--vt-border: #ddd4ee;
	--vt-border-strong: #c9bddf;
	--vt-focus: #6d28d9;
	--vt-focus-on-night: #e9d5ff;
	--vt-disabled-bg: #e4dcf2;
	--vt-disabled-ink: #4a415f;

	--vt-gradient-filament: linear-gradient(120deg, #7c3aed 0%, #4f46e5 48%, #2563eb 100%);
	--vt-gradient-button: linear-gradient(120deg, #5b21b6 0%, #6d28d9 46%, #4338ca 100%);
	--vt-gradient-night:
		radial-gradient(ellipse at 0% 0%, rgba(124, 58, 237, 0.42), transparent 52%),
		radial-gradient(ellipse at 100% 85%, rgba(37, 99, 235, 0.34), transparent 48%),
		linear-gradient(180deg, #1a0b2e 0%, #160d28 58%, #1e1b4b 100%);

	--vt-shadow-soft: 0 12px 32px rgba(28, 16, 48, 0.07);
	--vt-shadow-lift: 0 18px 44px rgba(46, 16, 101, 0.14);
	--vt-shadow-glow: 0 0 36px rgba(124, 58, 237, 0.28);
	--vt-shadow-header: 0 12px 32px rgba(8, 4, 18, 0.28);

	--vt-radius-sm: 0.75rem;
	--vt-radius: 1.15rem;
	--vt-radius-lg: 1.75rem;

	--vt-space-2xs: 0.5rem;
	--vt-space-xs: 0.75rem;
	--vt-space-sm: 1rem;
	--vt-space-md: 1.5rem;
	--vt-space-lg: 2.5rem;
	--vt-space-xl: 4rem;
	--vt-space-2xl: 6.5rem;

	--vt-font-display: Fraunces, "Iowan Old Style", Palatino, Georgia, serif;
	--vt-font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	--vt-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--vt-measure: 68ch;
	--vt-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vt-duration: 0.55s;
	--vt-duration-fast: 0.2s;

	--vt-dot: 3px;
	--vt-dot-a: var(--vt-purple-bright);
	--vt-dot-b: var(--vt-blue);
	--vt-dot-c: var(--vt-electric);

	--theme-palette-color-1: var(--vt-purple);
	--theme-palette-color-2: var(--vt-purple-deep);
	--theme-palette-color-3: var(--vt-ink);
	--theme-palette-color-4: var(--vt-heading);
	--theme-palette-color-5: var(--vt-border);
	--theme-palette-color-6: var(--vt-surface-muted);
	--theme-palette-color-7: var(--vt-canvas);
	--theme-palette-color-8: var(--vt-surface);

	--theme-text-color: var(--vt-ink);
	--theme-link-initial-color: var(--vt-purple-rich);
	--theme-link-hover-color: var(--vt-purple-deep);
	--theme-headings-color: var(--vt-heading);
	--theme-border-color: var(--vt-border);
	--theme-selection-text-color: #ffffff;
	--theme-selection-background-color: var(--vt-purple);

	--theme-button-background-initial-color: var(--vt-purple);
	--theme-button-background-hover-color: var(--vt-purple-rich);
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;
	--theme-button-border-radius: var(--vt-radius-sm);
	--theme-button-min-height: 2.75rem;
	--theme-button-padding: 0.7rem 1.15rem;
	--theme-button-font-family: var(--vt-font-body);
	--theme-button-font-weight: 600;
	--theme-button-font-size: 0.98rem;
	--theme-button-line-height: 1.2;

	--theme-font-family: var(--vt-font-body);
	--theme-font-weight: 400;
	--theme-font-size: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);
	--theme-line-height: 1.7;
	--theme-letter-spacing: -0.011em;

	--theme-form-field-border-radius: var(--vt-radius-sm);
	--theme-form-field-height: 2.75rem;
	--theme-form-field-border-initial-color: var(--vt-border-strong);
	--theme-form-field-border-focus-color: var(--vt-purple);

	--theme-content-spacing: 1.35em;
	--theme-block-max-width: 72rem;
	--theme-block-wide-max-width: 88rem;
	--theme-box-shadow: var(--vt-shadow-soft);

	color-scheme: light;
}