/*
 * Kininusa News — design tokens (Phase 5 foundation; extended in Phase 7).
 *
 * Single source of truth for design values; components consume only these
 * variables. Values are derived from the forensic design specification
 * (observed behavior basis) with a new, normalized scale.
 *
 * Breakpoints in use: 980px (layout + header), 640px / 533px (components),
 * 420px (mobile typography).
 */

:root {
	/* Color — light theme */
	--kn-color-primary: #d92d20;
	--kn-color-primary-strong: #b42318;
	--kn-color-secondary: #f79009;
	--kn-color-accent: var(--kn-color-primary);
	--kn-color-background: #ffffff;
	--kn-color-surface: #f8f9fb;
	--kn-color-surface-2: #f1f3f6;
	--kn-color-text: #1f2430;
	--kn-color-text-muted: #6b7280;
	--kn-color-border: #e5e7eb;
	--kn-color-link: var(--kn-color-primary);
	--kn-color-link-hover: var(--kn-color-primary-strong);
	--kn-color-gradient-from: var(--kn-color-primary);
	--kn-color-gradient-to: var(--kn-color-secondary);
	--kn-color-on-accent: #ffffff;

	/* Typography */
	--kn-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--kn-font-heading: var(--kn-font-body);
	--kn-font-size-xs: 12px;
	--kn-font-size-sm: 13px;
	--kn-font-size-base: 15px;
	--kn-font-size-lg: 17px;
	--kn-font-size-xl: 21px;
	--kn-font-size-2xl: 25px;
	--kn-font-size-3xl: 34px;
	--kn-line-height-base: 1.6;
	--kn-line-height-tight: 1.25;
	--kn-font-weight-normal: 400;
	--kn-font-weight-medium: 500;
	--kn-font-weight-bold: 700;

	/* Spacing scale */
	--kn-space-1: 4px;
	--kn-space-2: 8px;
	--kn-space-3: 10px;
	--kn-space-4: 16px;
	--kn-space-5: 20px;
	--kn-space-6: 25px;
	--kn-space-7: 30px;
	--kn-space-8: 50px;

	/* Layout */
	--kn-container: 1120px;
	--kn-gutter: 16px;
	--kn-sidebar-width: 330px;

	/* Radius */
	--kn-radius-sm: 4px;
	--kn-radius-md: 6px;
	--kn-radius-lg: 12px;
	--kn-radius-pill: 34px;
	--kn-radius-circle: 50%;

	/* Shadow */
	--kn-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--kn-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
	--kn-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

	/* Transition */
	--kn-t-fast: 0.2s ease;
	--kn-t-base: 0.3s ease;
	--kn-t-slow: 0.5s ease;

	/* Z-index scale (small, consistent; no 999999) */
	--kn-z-base: 1;
	--kn-z-raised: 2;
	--kn-z-float: 10;
	--kn-z-dropdown: 50;
	--kn-z-header: 100;
	--kn-z-backdrop: 150;
	--kn-z-drawer: 200;
	--kn-z-overlay: 1000;

	color-scheme: light;
}

/* Dark theme token overrides (applied by the DarkMode module — inline
   bootstrap in app/Modules/DarkMode.php — via html[data-theme="dark"]). */
[data-theme="dark"] {
	--kn-color-background: #17181c;
	--kn-color-surface: #1f2229;
	--kn-color-surface-2: #262a32;
	--kn-color-text: #e7e9ee;
	--kn-color-text-muted: #a3a9b3;
	--kn-color-border: #333842;
	--kn-color-link: #ff7a6e;
	--kn-color-link-hover: #ff9c93;
	--kn-color-on-accent: #ffffff;

	/* Brand blues that stay blue on the dark palette (nav bar, accents). */
	--kn-color-primary: #4f8ef7;
	--kn-color-primary-strong: #3568c9;

	/* Trending strip stays deep navy so the white pill/text keeps contrast. */
	--kn-trending-from: #0d1c4d;
	--kn-trending-to: #12245e;

	color-scheme: dark;
}