/*
Theme Name: CosmicLens
Theme URI: https://cosmiclens.online/
Author: CosmicLens
Author URI: https://cosmiclens.online/
Description: A dark, cinematic "Deep Space Observatory" theme for space discoveries and astronomy news. Hand-coded PHP, CSS and vanilla JS: CSS-3D orbital hero, editorial serif headlines, light/dark toggle, reading progress, FAQ with schema, Article and Breadcrumb JSON-LD, and layout-safe ad slots. No page builders, no plugin dependencies.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cosmiclens
Tags: blog, news, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, theme-options
*/

/* ==========================================================================
   Design tokens — every other stylesheet references these, never raw hex.
   Dark is the default for everyone; light applies only when a visitor picks it
   ([data-theme="light"], restored before first paint by assets/js/theme-init.js).
   ========================================================================== */

:root {
	/* Surfaces */
	--color-bg-base: #070A14;
	--color-bg-raised: #0E1426;
	--color-bg-overlay: #151C33;
	--color-bg-subtle: #1A2240;

	/* Text */
	--color-text-primary: #EDF1FA;
	--color-text-secondary: #9AA6C2;
	--color-text-disabled: #6B7694;

	/* Accent: one cyan → violet family */
	--color-accent-cyan: #22D3EE;
	--color-accent-violet: #A78BFA;
	--gradient-accent: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-violet));
	--color-on-accent: #070A14;
	--color-accent-muted: rgba(34, 211, 238, 0.12);
	--color-link: #22D3EE;
	--color-link-hover: #A78BFA;

	/* Lines & focus */
	--color-border: #1F2947;
	--color-border-strong: #33406A;
	--color-focus-ring: #22D3EE;

	/* Status */
	--color-success: #34D399;
	--color-destructive: #F87171;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 18px 40px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(34, 211, 238, 0.06);

	/* Hero is always a night sky, in both themes */
	--hero-bg: #070A14;
	--hero-text: #EDF1FA;
	--hero-muted: #B4BED6;

	/* Typography */
	--font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
	--text-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	--text-3xl: clamp(2.125rem, 1.6rem + 2vw, 3.25rem);
	--text-display: clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem);

	/* Spacing (8-pt grid) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;

	/* Radius */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 24px;
	--radius-full: 9999px;

	/* Motion */
	--dur-instant: 120ms;
	--dur-fast: 200ms;
	--dur-base: 250ms;
	--dur-slow: 500ms;
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Layout */
	--container: 1360px;
	--container-narrow: 820px;
	--gutter: clamp(16px, 4vw, 40px);
	--admin-offset: var(--wp-admin--admin-bar--height, 0px);

	color-scheme: dark;
}

/* Light theme — explicit choice */
:root[data-theme="light"] {
	--color-bg-base: #F6F8FC;
	--color-bg-raised: #FFFFFF;
	--color-bg-overlay: #EEF2F9;
	--color-bg-subtle: #E4E9F3;
	--color-text-primary: #0B1020;
	--color-text-secondary: #4A5574;
	--color-text-disabled: #8A93AB;
	--color-accent-cyan: #0E7490;
	--color-accent-violet: #6D28D9;
	--color-on-accent: #FFFFFF;
	--color-accent-muted: rgba(14, 116, 144, 0.1);
	--color-link: #0E7490;
	--color-link-hover: #6D28D9;
	--color-border: #D6DDEA;
	--color-border-strong: #B7C2D8;
	--color-focus-ring: #0E7490;
	--color-success: #047857;
	--color-destructive: #DC2626;
	--shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.08);
	--shadow-md: 0 18px 40px -20px rgba(11, 16, 32, 0.25), 0 0 0 1px rgba(11, 16, 32, 0.04);
	color-scheme: light;
}

/* Surfaces that stay "night" in both themes (hero, image-overlay cards). */
.surface-night {
	--color-text-primary: #EDF1FA;
	--color-text-secondary: #B4BED6;
	--color-accent-cyan: #22D3EE;
	--color-accent-violet: #A78BFA;
	--gradient-accent: linear-gradient(90deg, #22D3EE, #A78BFA);
	--color-on-accent: #070A14;
	--color-accent-muted: rgba(34, 211, 238, 0.14);
	--color-link: #22D3EE;
	--color-link-hover: #C4B5FD;
	--color-border: rgba(237, 241, 250, 0.14);
	--color-focus-ring: #22D3EE;
	color-scheme: dark;
}