/* ==========================================================================
   Knack Theme: CSS Custom Properties (Design Tokens)
   Light mode defaults + dark mode overrides via body.aoty-dark-mode
   ========================================================================== */

:root {
	/* --- Layout --- */
	--knack-container-width: 1280px;
	--knack-sidebar-width: 300px;
	--knack-side-panel-width: 260px;
	--knack-header-height: 64px;

	/* --- Colors: Light mode (base) --- */
	--knack-bg: #ffffff;
	--knack-bg-secondary: #f7f7f8;
	--knack-bg-tertiary: #efefef;
	--knack-surface: #ffffff;
	--knack-surface-raised: #ffffff;
	--knack-text: #1f2937;
	--knack-text-secondary: #6b7280;
	--knack-text-muted: #9ca3af;
	--knack-border: #e0e0e0;
	--knack-border-soft: #ebebeb;
	--knack-accent: #7c3aed;
	--knack-accent-hover: #6d28d9;
	--knack-accent-light: #ede9fe;
	--knack-accent-muted: rgba(124, 58, 237, 0.12);
	--knack-accent-text: #ffffff;
	--knack-link: #7c3aed;
	--knack-link-hover: #6d28d9;
	--knack-success: #10b981;
	--knack-warning: #f59e0b;
	--knack-danger: #ef4444;

	/* --- Typography --- */
	--knack-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--knack-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--knack-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
	--knack-text-base: 15px;
	--knack-line-height: 1.6;
	--knack-font-size-xs: 0.75rem;
	--knack-font-size-sm: 0.8125rem;
	--knack-font-size-base: 0.9375rem;
	--knack-font-size-lg: 1.125rem;
	--knack-font-size-xl: 1.25rem;
	--knack-font-size-2xl: 1.5rem;
	--knack-font-size-3xl: 2rem;

	/* --- Spacing --- */
	--knack-space-xs: 4px;
	--knack-space-sm: 8px;
	--knack-space-md: 16px;
	--knack-space-lg: 24px;
	--knack-space-xl: 32px;
	--knack-space-2xl: 48px;
	--knack-section-gap: 64px;

	/* --- Border Radius --- */
	--knack-radius-sm: 4px;
	--knack-radius: 6px;
	--knack-radius-lg: 8px;
	--knack-radius-xl: 12px;
	--knack-radius-2xl: 16px;
	--knack-radius-3xl: 24px;
	--knack-radius-pill: 9999px;

	/* --- Shadows --- */
	--knack-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--knack-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--knack-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--knack-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--knack-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04);
	--knack-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);

	/* --- Dividers --- */
	--knack-divider: 1px solid var(--knack-border-soft);

	/* --- Z-index Scale --- */
	--knack-z-dropdown: 50;
	--knack-z-panel: 100;
	--knack-z-header: 200;
	--knack-z-overlay: 300;
	--knack-z-modal: 400;

	/* --- Section Rhythm --- */
	--knack-section-py: 56px;
	--knack-section-py-lg: 72px;
	--knack-bg-tinted: #f8f8fa;
	--knack-heading-section: 22px;
	--knack-heading-subsection: 15px;

	/* --- Transitions --- */
	--knack-transition: 0.2s ease;
	--knack-transition-slow: 0.3s ease;
}

/* ==========================================================================
   Dark Mode: Overrides when AOTY plugin toggles body.aoty-dark-mode
   ========================================================================== */

html.aoty-dark-mode,
body.aoty-dark-mode {
	--knack-bg: #111111;
	--knack-bg-secondary: #1a1a1a;
	--knack-bg-tertiary: #222222;
	--knack-surface: #1a1a1a;
	--knack-surface-raised: #2a2a2a;
	--knack-text: #e6edf3;
	--knack-text-secondary: #8b949e;
	--knack-text-muted: #6e7681;
	--knack-border: #30363d;
	--knack-border-soft: #222222;
	--knack-accent: #a78bfa;
	--knack-accent-hover: #8b5cf6;
	--knack-accent-light: rgba(167, 139, 250, 0.1);
	--knack-accent-muted: rgba(167, 139, 250, 0.15);
	--knack-accent-text: #ffffff;
	--knack-link: #a78bfa;
	--knack-link-hover: #c4b5fd;

	--knack-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--knack-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
	--knack-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
	--knack-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
	--knack-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
	--knack-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);

	--knack-bg-tinted: #1e1e22;
}