/* Kinra Learn — Design Tokens (adapted from Kinra) */

:root {
	/* Minnesota-Inspired Palette */
	--bg-primary: #0c0c0f;
	--bg-secondary: #141418;
	--bg-tertiary: #1e1e24;
	--text-primary: #e0e4eb;
	--text-secondary: #a8b0c0;
	--text-muted: #5c6370;
	--accent-blue: #5fafd7;
	--accent-cyan: #87d7ff;
	--accent-green: #5cb85c;
	--accent-yellow: #c9a227;
	--accent-red: #dc5c5c;
	--accent-magenta: #9a7fcc;
	--border-color: #2a2a32;
	--border-subtle: color-mix(in srgb, var(--border-color) 60%, transparent);
	--bg-elevated: var(--bg-tertiary);
	--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", "Consolas", monospace;

	/* Spacing scale (4px base) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 32px;
	--space-7: 48px;

	/* Font sizes */
	--font-xs: 10px;
	--font-sm: 12px;
	--font-md: 14px;

	/* Accent opacity variants */
	--accent-cyan-60: color-mix(in srgb, var(--accent-cyan) 60%, transparent);
	--accent-cyan-45: color-mix(in srgb, var(--accent-cyan) 45%, transparent);
	--accent-cyan-30: color-mix(in srgb, var(--accent-cyan) 30%, transparent);
	--accent-cyan-25: color-mix(in srgb, var(--accent-cyan) 25%, transparent);
	--accent-cyan-18: color-mix(in srgb, var(--accent-cyan) 18%, transparent);
	--accent-cyan-15: color-mix(in srgb, var(--accent-cyan) 15%, transparent);
	--accent-cyan-12: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
	--accent-blue-15: color-mix(in srgb, var(--accent-blue) 15%, transparent);
	--accent-blue-30: color-mix(in srgb, var(--accent-blue) 30%, transparent);
	--accent-green-30: color-mix(in srgb, var(--accent-green) 30%, transparent);
	--accent-green-12: color-mix(in srgb, var(--accent-green) 12%, transparent);
	--accent-yellow-12: color-mix(in srgb, var(--accent-yellow) 12%, transparent);
	--accent-yellow-30: color-mix(in srgb, var(--accent-yellow) 30%, transparent);

	/* Overlay tints */
	--overlay-light-3: rgba(255, 255, 255, 0.03);
	--overlay-light-5: rgba(255, 255, 255, 0.05);

	/* Backdrop */
	--bg-backdrop: rgba(0, 0, 0, 0.75);

	/* Shadows */
	--shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);

	/* Glow effects */
	--glow-cyan: 0 0 6px var(--accent-cyan-30);
	--glow-cyan-soft: 0 0 4px var(--accent-cyan-18);
	--glow-cyan-intent: 0 0 8px var(--accent-cyan-45);
	--glow-cyan-subtle: 0 0 3px var(--accent-cyan-12);

	/* Text glow effects */
	--text-glow-cyan: 0 0 4px var(--accent-cyan-30);
	--text-glow-cyan-soft: 0 0 3px var(--accent-cyan-30);
	--text-glow-cyan-hover: 0 0 5px var(--accent-cyan-45);

	/* Border radius scale */
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 8px;

	/* Easing curves */
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out-smooth: cubic-bezier(0.33, 1, 0.68, 1);

	/* Animation durations */
	--duration-fast: 100ms;
	--duration-normal: 150ms;
	--duration-slow: 200ms;

	/* Layout */
	--sidebar-width: 260px;
	--content-max-width: 720px;
}