/**
 * NEws Theme - Base Stylesheet & Design System
 * 
 * Includes:
 * 1. Design Tokens (Colors, Dark Mode, Spacing, Typography, Containers)
 * 2. Lightweight Modern Reset
 * 3. Body & Anti-Horizontal-Scroll
 * 4. Scalable Typography
 * 5. Links & Interactive Focus States
 * 6. Media & Image Foundations
 * 7. Accessibility Utilities & Reduced Motion
 * 
 * @package NewsCore
 * @since 1.1.0
 */

/* ==========================================================================
   1. Design System Tokens (CSS Custom Properties)
   ========================================================================== */
:root {
	/* --- Color System (Light Mode Default) --- */
	--nc-color-bg: #ffffff;
	--nc-color-surface: #f8fafc;
	--nc-color-surface-hover: #f1f5f9;
	--nc-color-surface-active: #e2e8f0;
	--nc-color-border: #e2e8f0;
	--nc-color-border-dark: #cbd5e1;

	--nc-color-text: #0f172a;
	--nc-color-text-muted: #475569;
	--nc-color-text-light: #94a3b8;

	--nc-color-primary: #dc2626;        /* High-visibility Editorial Red */
	--nc-color-primary-hover: #b91c1c;
	--nc-color-primary-light: #fee2e2;

	--nc-color-accent: #0284c7;         /* Deep Editorial Blue */
	--nc-color-accent-hover: #0369a1;
	--nc-color-accent-light: #e0f2fe;

	--nc-color-error: #ef4444;
	--nc-color-error-light: #fef2f2;
	--nc-color-success: #10b981;
	--nc-color-success-light: #ecfdf5;

	--nc-color-header-bg: #ffffff;
	--nc-color-topbar-bg: #0f172a;
	--nc-color-topbar-text: #94a3b8;
	--nc-color-footer-bg: #090d16;
	--nc-color-footer-text: #94a3b8;
	--nc-color-footer-heading: #f8fafc;
	--nc-color-footer-border: #1e293b;

	/* --- Typography System (System Font Stack - Zero WebFont Overhead) --- */
	--nc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--nc-font-serif: "Georgia", "Times New Roman", Cambria, serif;
	--nc-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--nc-font-base: var(--nc-font-sans);
	--nc-font-heading: var(--nc-font-sans);
	--nc-font-editorial: var(--nc-font-serif);

	/* Fluid Font Sizes using clamp() */
	--nc-font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);      /* 12px - 13px */
	--nc-font-size-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);      /* 13px - 14px */
	--nc-font-size-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);   /* 15px - 17px */
	--nc-font-size-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);         /* 17px - 20px */
	--nc-font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);          /* 20px - 24px (H4) */
	--nc-font-size-2xl: clamp(1.5rem, 1.35rem + 0.8vw, 1.875rem);        /* 24px - 30px (H3) */
	--nc-font-size-3xl: clamp(1.875rem, 1.6rem + 1.2vw, 2.375rem);       /* 30px - 38px (H2) */
	--nc-font-size-4xl: clamp(2.25rem, 1.85rem + 1.8vw, 3rem);           /* 36px - 48px (H1 / Article) */
	--nc-font-size-5xl: clamp(2.75rem, 2.2rem + 2.5vw, 4rem);            /* 44px - 64px (Hero) */

	/* Semantic Typography Mappings */
	--nc-text-body: var(--nc-font-size-base);
	--nc-text-small: var(--nc-font-size-sm);
	--nc-text-meta: var(--nc-font-size-xs);
	--nc-text-category: var(--nc-font-size-xs);
	--nc-text-h1: var(--nc-font-size-4xl);
	--nc-text-h2: var(--nc-font-size-3xl);
	--nc-text-h3: var(--nc-font-size-2xl);
	--nc-text-h4: var(--nc-font-size-xl);
	--nc-text-article-title: var(--nc-font-size-4xl);
	--nc-text-article-excerpt: var(--nc-font-size-lg);

	--nc-line-height-tight: 1.18;
	--nc-line-height-snug: 1.32;
	--nc-line-height-normal: 1.6;
	--nc-line-height-relaxed: 1.75;

	/* --- Spacing Scale (8 Consistent Steps) --- */
	--nc-space-1: 0.25rem;   /* 4px */
	--nc-space-2: 0.5rem;    /* 8px */
	--nc-space-3: 0.75rem;   /* 12px */
	--nc-space-4: 1rem;      /* 16px */
	--nc-space-5: 1.5rem;    /* 24px */
	--nc-space-6: 2rem;      /* 32px */
	--nc-space-7: 3rem;      /* 48px */
	--nc-space-8: 4rem;      /* 64px */

	/* --- Container System --- */
	--nc-container-full: 100%;
	--nc-container-wide: 1400px;
	--nc-container-standard: 1240px;
	--nc-container-reading: 760px;
	--nc-gutter: clamp(1rem, 0.8rem + 1vw, 2rem);
	--nc-sidebar-width: 340px;

	/* --- Radii & Shadows --- */
	--nc-radius-sm: 3px;
	--nc-radius-md: 6px;
	--nc-radius-lg: 10px;
	--nc-radius-full: 9999px;

	--nc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--nc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
	--nc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.08);

	/* --- Transitions --- */
	--nc-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--nc-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Dark Mode Foundation (System & Manual Toggle Support)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--nc-color-bg: #090d16;
		--nc-color-surface: #111827;
		--nc-color-surface-hover: #1f2937;
		--nc-color-surface-active: #374151;
		--nc-color-border: #1f2937;
		--nc-color-border-dark: #374151;

		--nc-color-text: #f8fafc;
		--nc-color-text-muted: #94a3b8;
		--nc-color-text-light: #64748b;

		--nc-color-primary: #ef4444;
		--nc-color-primary-hover: #f87171;
		--nc-color-primary-light: #3f1212;

		--nc-color-accent: #38bdf8;
		--nc-color-accent-hover: #7dd3fc;
		--nc-color-accent-light: #082f49;

		--nc-color-header-bg: #0c1220;
		--nc-color-topbar-bg: #060911;
		--nc-color-footer-bg: #05080f;
		--nc-color-footer-border: #1e293b;
	}
}

[data-theme="dark"] {
	--nc-color-bg: #090d16;
	--nc-color-surface: #111827;
	--nc-color-surface-hover: #1f2937;
	--nc-color-surface-active: #374151;
	--nc-color-border: #1f2937;
	--nc-color-border-dark: #374151;

	--nc-color-text: #f8fafc;
	--nc-color-text-muted: #94a3b8;
	--nc-color-text-light: #64748b;

	--nc-color-primary: #ef4444;
	--nc-color-primary-hover: #f87171;
	--nc-color-primary-light: #3f1212;

	--nc-color-accent: #38bdf8;
	--nc-color-accent-hover: #7dd3fc;
	--nc-color-accent-light: #082f49;

	--nc-color-header-bg: #0c1220;
	--nc-color-topbar-bg: #060911;
	--nc-color-footer-bg: #05080f;
	--nc-color-footer-border: #1e293b;
}

[data-theme="light"] {
	--nc-color-bg: #ffffff;
	--nc-color-surface: #f8fafc;
	--nc-color-surface-hover: #f1f5f9;
	--nc-color-surface-active: #e2e8f0;
	--nc-color-border: #e2e8f0;
	--nc-color-border-dark: #cbd5e1;

	--nc-color-text: #0f172a;
	--nc-color-text-muted: #475569;
	--nc-color-text-light: #94a3b8;

	--nc-color-primary: #dc2626;
	--nc-color-primary-hover: #b91c1c;
	--nc-color-primary-light: #fee2e2;

	--nc-color-accent: #0284c7;
	--nc-color-accent-hover: #0369a1;
	--nc-color-accent-light: #e0f2fe;

	--nc-color-header-bg: #ffffff;
	--nc-color-topbar-bg: #0f172a;
	--nc-color-footer-bg: #090d16;
}

/* ==========================================================================
   3. Modern Global Reset
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-family: var(--nc-font-base);
	font-size: 16px;
	line-height: var(--nc-line-height-normal);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--nc-color-bg);
	color: var(--nc-color-text);
	font-family: var(--nc-font-base);
	font-size: var(--nc-text-body);
	line-height: var(--nc-line-height-normal);
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip; /* Modern clean horizontal scroll prevention */
}

/* ==========================================================================
   4. Scalable Editorial Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--nc-font-heading);
	font-weight: 800;
	line-height: var(--nc-line-height-tight);
	color: var(--nc-color-text);
	margin-block-end: var(--nc-space-3);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 { font-size: var(--nc-text-h1); }
h2 { font-size: var(--nc-text-h2); }
h3 { font-size: var(--nc-text-h3); }
h4 { font-size: var(--nc-text-h4); }
h5 { font-size: var(--nc-font-size-lg); }
h6 { font-size: var(--nc-font-size-base); }

p {
	margin-block-end: var(--nc-space-4);
	text-wrap: pretty;
}

small,
.text-small {
	font-size: var(--nc-text-small);
}

.text-meta {
	font-size: var(--nc-text-meta);
	color: var(--nc-color-text-muted);
}

ul, ol {
	padding-inline-start: var(--nc-space-5);
	margin-block-end: var(--nc-space-4);
}

li {
	margin-block-end: var(--nc-space-2);
}

blockquote {
	border-inline-start: 4px solid var(--nc-color-primary);
	padding-inline: var(--nc-space-5);
	padding-block: var(--nc-space-3);
	margin-block: var(--nc-space-6);
	font-family: var(--nc-font-editorial);
	font-style: italic;
	font-size: var(--nc-font-size-lg);
	color: var(--nc-color-text-muted);
	background-color: var(--nc-color-surface);
	border-start-end-radius: var(--nc-radius-md);
	border-end-end-radius: var(--nc-radius-md);
}

hr {
	border: 0;
	border-block-start: 1px solid var(--nc-color-border);
	margin-block: var(--nc-space-8);
}

/* ==========================================================================
   5. Links & Interactive Focus States
   ========================================================================== */
a {
	color: inherit;
	text-decoration: none;
	transition: color var(--nc-transition-fast);
}

a:hover {
	color: var(--nc-color-primary);
}

/* Content Links with Underlines for High Accessibility */
.entry-content a:not(.btn):not(.cat-badge) {
	color: var(--nc-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.entry-content a:not(.btn):not(.cat-badge):hover {
	color: var(--nc-color-primary-hover);
	text-decoration-thickness: 2px;
}

/* Visible Keyboard Focus Ring */
:focus-visible {
	outline: 2px solid var(--nc-color-primary);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   6. Image & Media System
   ========================================================================== */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin-block-end: var(--nc-space-6);
}

figcaption {
	font-size: var(--nc-text-meta);
	color: var(--nc-color-text-muted);
	margin-block-start: var(--nc-space-2);
	text-align: start;
	font-style: italic;
}

/* ==========================================================================
   7. Accessibility Utilities & Reduced Motion
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--nc-color-surface);
	clip: auto !important;
	clip-path: none;
	color: var(--nc-color-text);
	display: block;
	font-size: var(--nc-text-small);
	font-weight: 700;
	height: auto;
	inset-inline-start: var(--nc-space-3);
	top: var(--nc-space-3);
	line-height: normal;
	padding: var(--nc-space-3) var(--nc-space-5);
	text-decoration: none;
	width: auto;
	z-index: 100000;
	border-radius: var(--nc-radius-md);
	box-shadow: var(--nc-shadow-lg);
	border: 2px solid var(--nc-color-primary);
}

/* Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}