/**
 * NovaSpark Design System Variables (Vercel Geist Design System)
 *
 * ⚠ SINGLE SOURCE OF TRUTH.
 * These tokens are declared here and NOWHERE else. Do not re-declare :root or
 * [data-theme="dark"] in style.css, novaspark.css, prose.css, components.css or
 * any plugin stylesheet — change a value here and it propagates everywhere.
 *
 * @package NovaSpark
 */

:root {
	/* Tells the UA to render native widgets (scrollbars, form controls, caret) light. */
	color-scheme: light;

	/* COLORS — Light Mode (Vercel Canvas #ffffff, Surface #fafafa) */
	--ns-bg:           #ffffff;
	--ns-bg-2:         #fafafa;
	--ns-bg-3:         #f4f4f5;
	--ns-surface:      #ffffff;
	--ns-surface-2:    #fafafa;
	--ns-border:       #e5e5e5;
	--ns-border-2:     #eaeaea;
	--ns-text:         #171717;
	--ns-text-2:       #444444;
	--ns-text-3:       #666666;
	--ns-text-4:       #757575;  /* AA-safe muted (4.6:1 on --ns-bg) */
	--ns-accent:       #006bff;
	--ns-accent-dark:  #0051cc;
	--ns-accent-light: #e6f0ff;
	--ns-accent-gradient: linear-gradient(135deg, #006bff 0%, #0051cc 100%);
	--ns-success:      #10b981;
	--ns-warning:      #f59e0b;
	--ns-danger:       #ef4444;
	--ns-info:         #06b6d4;

	/* SEMANTIC SURFACES — derived, used by prose + components layers */
	--ns-code-bg:      #f4f4f5;
	--ns-code-text:    #171717;
	--ns-quote-rule:   var(--ns-accent);
	--ns-overlay:      rgba(0, 0, 0, 0.6);
	--ns-selection:    rgba(0, 107, 255, 0.16);
	--ns-focus-ring:   var(--ns-accent);

	/* HEADER & GLASSMORPHISM */
	--ns-header-bg:      rgba(255, 255, 255, 0.85);
	--ns-header-bg-solid: #ffffff;   /* @supports-not backdrop-filter fallback */
	--ns-header-border:  #e5e5e5;
	--ns-header-height:  64px;
	--ns-glass-blur:     blur(16px);

	/* TYPOGRAPHY (Inter + Playfair Display + JetBrains Mono) */
	--ns-font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ns-font-serif: 'Playfair Display', Georgia, Cambria, serif;
	--ns-font-mono:  'JetBrains Mono', 'Fira Code', Consolas, monospace;

	--ns-text-xs:   0.75rem;    /* 12px */
	--ns-text-sm:   0.875rem;   /* 14px */
	--ns-text-base: 1rem;       /* 16px */
	--ns-text-lg:   1.125rem;   /* 18px */
	--ns-text-xl:   1.25rem;    /* 20px */
	--ns-text-2xl:  1.5rem;     /* 24px */
	--ns-text-3xl:  1.875rem;   /* 30px */
	--ns-text-4xl:  2.25rem;    /* 36px */
	--ns-text-5xl:  3rem;       /* 48px */

	--ns-h1-size: clamp(2.25rem, 5vw, 3.25rem);
	--ns-h2-size: clamp(1.75rem, 3.5vw, 2.25rem);
	--ns-h3-size: clamp(1.35rem, 2.5vw, 1.75rem);
	--ns-h4-size: clamp(1.125rem, 2vw, 1.45rem);
	--ns-h5-size: 1.2rem;
	--ns-h6-size: 1rem;

	/* SPACING (4pt scale) */
	--ns-space-1:  0.25rem;  /* 4px */
	--ns-space-2:  0.5rem;   /* 8px */
	--ns-space-3:  0.75rem;  /* 12px */
	--ns-space-4:  1rem;     /* 16px */
	--ns-space-5:  1.25rem;  /* 20px */
	--ns-space-6:  1.5rem;   /* 24px */
	--ns-space-8:  2rem;     /* 32px */
	--ns-space-10: 2.5rem;   /* 40px */
	--ns-space-12: 3rem;     /* 48px */
	--ns-space-16: 4rem;     /* 64px */
	--ns-space-20: 5rem;     /* 80px */
	--ns-space-24: 6rem;     /* 96px */

	/* LAYOUT */
	--ns-container:     1200px;
	--ns-sidebar-width: 320px;
	--ns-gap:           1.75rem;
	/*
	 * Reading measure. Must be root-relative (rem), NOT ch: `ch` resolves
	 * against each element's own font-size, so a `> *` measure rule would give
	 * the lead paragraph, the h2 and body copy three different widths and the
	 * column would come out ragged. 42rem ≈ 68 characters of Inter at 18px.
	 */
	--ns-prose-width:   42rem;
	--ns-wide-width:    1040px; /* .alignwide escape width */

	/* Mobile breakpoint — overridable by header.mobile_breakpoint setting */
	--ns-mobile-bp: 768px;

	/* BORDER RADIUS (Vercel Geist Radii) */
	--ns-radius-sm:   6px;
	--ns-radius:      8px;
	--ns-radius-lg:   12px;
	--ns-radius-xl:   16px;
	--ns-radius-full: 9999px;

	/* SHADOWS (Vercel Crisp Hairline Shadows) */
	--ns-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--ns-shadow:    0 4px 12px rgba(0, 0, 0, 0.05);
	--ns-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.08);
	--ns-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.12);

	/* MOTION */
	--ns-ease:        cubic-bezier(0.16, 1, 0.3, 1);
	--ns-ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--ns-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ns-duration:    180ms;
	--ns-duration-lg: 300ms;

	/* CARD HOVER — one canonical lift, per design.md */
	--ns-card-lift: -3px;

	/* Z-INDEX */
	--ns-z-base:     1;
	--ns-z-dropdown: 100;
	--ns-z-sticky:   200;
	--ns-z-overlay:  300;
	--ns-z-modal:    400;
	--ns-z-toast:    500;
}

[data-theme="dark"] {
	color-scheme: dark;

	/* COLORS — Vercel Dark (Canvas #000000, Surface #0a0a0a) */
	--ns-bg:           #000000;
	--ns-bg-2:         #0a0a0a;
	--ns-bg-3:         #141414;
	--ns-surface:      #0a0a0a;
	--ns-surface-2:    #141414;
	--ns-border:       #222222;
	--ns-border-2:     #333333;
	--ns-text:         #ededed;
	--ns-text-2:       #a1a1a1;
	--ns-text-3:       #8f8f8f;
	--ns-text-4:       #8a8a8a;  /* AA-safe muted (6.1:1 on --ns-bg) */
	--ns-accent:       #006bff;
	--ns-accent-dark:  #3b82f6;
	--ns-accent-light: #0d1f38;
	--ns-accent-gradient: linear-gradient(135deg, #006bff 0%, #38bdf8 100%);

	--ns-code-bg:      #141414;
	--ns-code-text:    #ededed;
	--ns-overlay:      rgba(0, 0, 0, 0.75);
	--ns-selection:    rgba(0, 107, 255, 0.32);

	--ns-header-bg:       rgba(0, 0, 0, 0.85);
	--ns-header-bg-solid: #000000;
	--ns-header-border:   #222222;

	--ns-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
	--ns-shadow:    0 4px 12px rgba(0, 0, 0, 0.6);
	--ns-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.7);
	--ns-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.8);
}

/* Users who ask for more contrast get harder borders and darker muted text. */
@media (prefers-contrast: more) {
	:root {
		--ns-border:   #c4c4c4;
		--ns-border-2: #b0b0b0;
		--ns-text-3:   #4a4a4a;
		--ns-text-4:   #555555;
	}

	[data-theme="dark"] {
		--ns-border:   #4a4a4a;
		--ns-border-2: #5c5c5c;
		--ns-text-3:   #c4c4c4;
		--ns-text-4:   #b0b0b0;
	}
}