/* === themes.css ===
   Централизованная дизайн-система. 
   Переменные совместимы со стандартами тем Obsidian и нативно поддерживают темы Telegram.
   
   ПРАВИЛО: В других CSS-файлах запрещено использовать сырые цвета (hex/rgb). 
   Используйте только эти семантические токены. 
*/

:root {
	/* === BLOCK 0: GLOBAL CONSTANTS (Skeleton & Layout Geometry) ===
	   Values in this block do NOT change based on theme mode. */

	/* Animations and Transitions */
	--anim-fast: 0.2s;
	--anim-speed: 0.3s;
	--transition-base: background-color var(--anim-fast), color var(--anim-fast), border-color var(--anim-fast);

	/* Geometry & Spacing System */
	--nav-item-height: 3.286rem;
	--nav-item-padding-x: var(--size-4-5);
	--nav-item-padding-y: var(--size-4-3);
	--button-padding-x: var(--size-4-3);
	--button-padding-y: var(--size-4-2);
	--size-2-1: 0.143rem;
	--size-4-1: 0.286rem;
	--size-4-2: 0.571rem;
	--size-4-3: 0.857rem;
	--size-4-3-5: 1.0rem;
	--size-4-4: 1.143rem;
	--size-4-5: 1.429rem;
	--size-4-6: 1.714rem;
	--size-4-7: 2.0rem;
	--size-4-8: 2.286rem;
	--size-4-9: 2.571rem;
	--size-4-10: 2.857rem;
	--size-4-11: 3.143rem;
	--size-4-12: 3.429rem;
	--size-4-13: 3.714rem;
	--size-4-14: 4.0rem;
	--size-4-15: 4.286rem;
	--size-4-16: 4.571rem;
	--size-4-23: 6.571rem;
	--p-margin-bottom: 1.5rem;
	--header-offset: 5.5rem;

	/* Radius Defaults */
	--radius-s: 0.429rem;          /* 6px: Теги, чекбоксы, мелкие детали */
	--radius-m: 0.571rem;          /* 8px: Общий стандарт (кнопки, меню, формы) */
	--radius-l: 0.714rem;          /* 10px: Крупные карточки и панели */
	--radius-pill: 999px;          /* Капсула: прогресс-бары, лоадеры */
	--radius-circle: 50%;          /* Круг: только аватары и акцентные кнопки */
	--button-radius: var(--radius-m);
	--bubble-radius: var(--size-4-4);   /* 16px: Пузыри сообщений */
	--input-radius: var(--radius-m);
	--container-radius: var(--size-4-3); /* 12px: Главные контейнеры (карточки новостей) */

	/* Icons Geometry */
	--icon-l: 1.429rem;
	--icon-m: 1.286rem;
	--icon-s: 1.143rem;

	/* Shadows Geometry */
	--shadow-m: 0 0.429rem 0.857rem var(--shadow-color);
	--shadow-s: 0 0.286rem 0.429rem var(--shadow-color-soft);

	/* Permanent Colors (Static) */
	--always-white: #ffffff;
	--always-black: #000000;
	--always-white-soft: rgba(255, 255, 255, 0.3);

	/* Typography Scale */
	--ui-zoom: 1;
	--ui-zoom-content: 1;

	--font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: "JetBrains Mono", "Fira Code", monospace;
	--font-weight-bold: 700;
	--font-weight-medium: 500;
	--font-weight-normal: 400;
	--font-weight-semibold: 600;

	/* Dynamic UI Scale */
	--font-ui-large: calc(1.143rem * var(--ui-zoom));
	--font-ui-medium: calc(0.857rem * var(--ui-zoom));
	--font-ui-small: calc(0.786rem * var(--ui-zoom));
	--font-ui-smaller: calc(0.714rem * var(--ui-zoom));

	/* Content & Reading Scale */
	--font-size-message: calc(0.857rem * var(--ui-zoom-content));
	--font-size-paragraph: calc(0.929rem * var(--ui-zoom-content));
	--font-size-article: calc(1rem * var(--ui-zoom-content));
	--font-size-button: calc(0.929rem * var(--ui-zoom));
	--font-size-input: var(--font-size-message);

	--p-line-height: 1.6;

	/* Global Components Geometry */
	--rail-width: 4.286rem;
	--rail-item-size: 2.75rem;
	--rail-icon-size: 1.5rem;
	--toolbar-item-height: var(--rail-item-size);
	--toolbar-icon-size: var(--rail-icon-size);
	--divider-width: 0.071rem;

	/* Calendar */
	--calendar-picker-filter: var(--interactive-accent);

	/* Alerts & Notifications */
	--alert-radius: var(--radius-m);
	--alert-padding: 0.75rem 1.071rem;
	--alert-margin: 0 0 1rem 0;
	--alert-blur: 8px;
	--alert-border-width: 1px;
	--alert-shadow: var(--shadow-l);

	/* Callout */
	--callout-radius: var(--radius-m);
	--callout-border-width-left: 0.286rem;
	--callout-title-padding: 0.714rem 0.714rem;
	--callout-content-padding: 0.714rem;
	--callout-background: var(--background-secondary);
	--callout-title-color: var(--text-normal);
	--callout-title-background: transparent;
	--callout-title-size: inherit;
	--callout-title-weight: var(--font-weight-semibold);
	--callout-blend-mode: normal;

	/* Checkboxes */
	--checkbox-radius: var(--radius-s);
	--checkbox-size: 1.286rem;
	--checkbox-marker-color: var(--background-primary);

	/* Headings */
	--h1-color: var(--text-normal);
	--h2-color: var(--text-normal);
	--h3-color: var(--text-normal);
	--h1-size: calc(1.714rem * var(--ui-zoom));
	--h2-size: calc(1.5rem * var(--ui-zoom));
	--h3-size: calc(1.429rem * var(--ui-zoom));
	--heading-weight: var(--font-weight-bold);
	--h1-weight: var(--heading-weight);
	--h2-weight: var(--heading-weight);
	--h3-weight: var(--heading-weight);

	/* Links */
	--link-decoration: underline;

	/* Tags */
	--tag-radius: var(--radius-s);

	/* Quote */
	--quote-radius: var(--radius-m);
	--quote-border-width: 0.214rem;

	/* Scrollbars */
	--scrollbar-width: 0.429rem;
	--scrollbar-radius: var(--radius-m);

	/* --- Z-Index Layers --- */
	--z-overlay: 9000;    /* Startup, Fullscreen modals */
	--z-context: 3000;    /* Context Menus */
	--z-drawer: 2000;     /* Mobile drawers & overlays */
	--z-header: 1000;     /* Sticky headers, Tab bars, Fixed inputs */
	--z-pinned: 100;      /* Pinned elements, Chat input area */
	--z-dropdown: 50;     /* Select menus, Tooltips */
	--z-base: 1;         /* Base level for relative stacking */

	/* --- Component Mapping (Shared Tokens) --- */
	--chat-input-padding-y: 0.25rem;
	--chat-input-padding-x: var(--size-4-5);
	--chat-input-z-index: var(--z-pinned);

	/* Messenger Bubbles */
	--bubble-border-left: var(--callout-border-width-left, 0.286rem) solid var(--interactive-accent);

	/* --- Gaming & Belts --- */
	--gaming-belt-yellow: #facc15;
	--gaming-belt-orange: #f97316;
	--gaming-belt-green: #22c55e;
	--gaming-progress-bg: var(--background-secondary-alt);
	--gaming-progress-height: 1.714rem;
	--gaming-progress-radius: var(--radius-pill);

	/* Identity / Avatars */
	--color-identity-1: #e17076;
	--color-identity-2: #7bc862;
	--color-identity-3: #e5ca77;
	--color-identity-4: #65aadd;
	--color-identity-5: #a695e7;
	--color-identity-6: #ee7aae;
}

/* === BLOCK 1: MASTER THEME VARIABLES (Full Token Set) === */

:root,
.theme-light {
	/* --- Leaf Colors (Palette) --- */
	--mono-100: #ffffff;
	--mono-200: #f5f5f7;
	--mono-300: #e5e5e7;
	--mono-400: #d1d1d6;
	--mono-500: #8e8e93;
	--mono-600: #636366;
	--mono-700: #48484a;
	--mono-800: #2c2c2e;
	--mono-900: #1d1d1f;

	--accent-primary: #add34e;
	--accent-shaded: color-mix(in srgb, var(--interactive-accent), black 20%);

	/* --- Backgrounds --- */
	--background-primary: var(--tg-theme-bg-color, var(--mono-100));
	--background-primary-alt: #fafafb;
	--background-secondary: var(--tg-theme-secondary-bg-color, var(--mono-200));
	--background-secondary-alt: #e2e4e7;
	
	/* Modifiers */
	--background-modifier-border: rgba(0, 0, 0, 0.12);
	--background-modifier-border-hover: rgba(0, 0, 0, 0.2);
	--background-modifier-hover: rgba(0, 0, 0, 0.05);
	--background-modifier-active: rgba(0, 0, 0, 0.1);
	--background-modifier-back-30: rgba(0, 0, 0, 0.1);
	--background-modifier-overlay: rgba(0, 0, 0, 0.4);

	/* --- Interaction --- */
	--interactive-accent: var(--tg-theme-button-color, var(--accent-primary));
	--interactive-accent-soft: color-mix(in srgb, var(--interactive-accent), transparent 90%);
	--interactive-hover: var(--background-modifier-hover);
	--divider-color: var(--background-modifier-border);

	/* --- Text --- */
	--text-normal: var(--tg-theme-text-color, var(--mono-900));
	--text-muted: var(--tg-theme-hint-color, #86868b);
	--text-on-accent: var(--tg-theme-button-text-color, #212121);
	--text-link: var(--tg-theme-link-color, var(--accent-primary));
	--text-error: var(--tg-theme-destructive-text-color, #da6362);
	--text-debug: var(--text-muted);
	--icon-color: var(--text-muted);
	--icon-color-hover: var(--interactive-accent);

	/* --- Component Mapping --- */
	--rail-bg: var(--background-primary-alt);
	--toolbar-bg: var(--background-primary);
	--chat-input-bg: var(--background-primary);
	
	/* Messenger Bubbles */
	--bubble-bg-own: var(--interactive-accent-soft);
	--bubble-bg-other: var(--background-primary-alt);
	--bubble-text-own: var(--text-normal);
	--bubble-text-other: var(--text-normal);
	--bubble-border-own: var(--divider-width) solid var(--background-modifier-border);
	--bubble-border-other: var(--divider-width) solid var(--background-modifier-border);
	--bubble-bg-own-shaded: var(--accent-shaded);

	/* --- UI Alerts --- */
	--alert-error-bg: rgba(218, 99, 98, 0.05); /* Lighter for glass effect */
	--alert-error-border: rgba(218, 99, 98, 0.3);
	--alert-error-text: var(--text-error);
	--alert-success-bg: rgba(76, 175, 80, 0.08);
	--alert-success-border: #4caf50;
	--alert-success-text: #4caf50;

	/* --- Visual Depth --- */
	--shadow-color: rgba(0, 0, 0, 0.1);
	--shadow-color-soft: rgba(0, 0, 0, 0.05);
	--scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
	--scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.3);
	--scrollbar-bg: transparent;

	/* --- Forms & Extras --- */
	--checkbox-color: var(--interactive-accent);
	--checkbox-border-color: var(--background-modifier-border);
	--tag-background: var(--background-modifier-hover);
	--tag-color: var(--interactive-accent);
	--quote-background: var(--background-secondary);
	--quote-border-color: var(--interactive-accent);
}

/* === BLOCK 2: DARK THEME OVERRIDES (Unified @media and .class) === */

@media (prefers-color-scheme: dark) {
	:root:not(.theme-light) {
		--is-dark: 1;
	}
}

.theme-dark {
	--is-dark: 1;
}


/* Fallback for system dark mode if .theme-light is NOT present */
@media (prefers-color-scheme: dark) {
	:root:not(.theme-light) {
		--mono-100: #17212b;
		--mono-200: #0e161d;
		--mono-300: #242f3d;
		--mono-900: #f5f5f5;

		--accent-primary: #add34e;
		--accent-shaded: color-mix(in srgb, var(--interactive-accent), black 20%);

		--background-primary: var(--tg-theme-bg-color, var(--mono-100));
		--background-primary-alt: #1e2933;
		--background-secondary: var(--tg-theme-secondary-bg-color, var(--mono-300));
		--background-secondary-alt: #364150;

		--background-modifier-border: rgba(255, 255, 255, 0.15);
		--background-modifier-border-hover: rgba(255, 255, 255, 0.25);
		--background-modifier-hover: rgba(255, 255, 255, 0.08);
		--background-modifier-active: rgba(255, 255, 255, 0.12);
		--background-modifier-back-30: rgba(255, 255, 255, 0.15);
		--background-modifier-overlay: rgba(0, 0, 0, 0.65);

		--interactive-accent: var(--tg-theme-button-color, var(--accent-primary));
		--interactive-accent-soft: color-mix(in srgb, var(--interactive-accent), transparent 85%);
		--divider-color: var(--background-modifier-border);

		--text-normal: var(--tg-theme-text-color, var(--mono-900));
		--text-muted: var(--tg-theme-hint-color, #708499);
		--text-on-accent: var(--tg-theme-button-text-color, #212121);

		--bubble-bg-own: var(--interactive-accent-soft);
		--bubble-bg-other: var(--background-primary-alt);
		--bubble-bg-own-shaded: var(--accent-shaded);

		--alert-error-bg: rgba(218, 99, 98, 0.12);
		--alert-error-border: rgba(218, 99, 98, 0.4);
		--alert-success-bg: rgba(76, 175, 80, 0.12);
		
		--shadow-color: rgba(0, 0, 0, 0.4);
		--shadow-color-soft: rgba(0, 0, 0, 0.2);
		--scrollbar-thumb-bg: rgba(255, 255, 255, 0.15);
		--scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.25);
		--scrollbar-bg: rgba(255, 255, 255, 0.05);

		--checkbox-border-color: var(--background-modifier-border);
	}
}

/* Explicit DARK class (Duplicate of @media block for Rule #8 autonomy) */
.theme-dark {
	--mono-100: #17212b;
	--mono-200: #0e161d;
	--mono-300: #242f3d;
	--mono-900: #f5f5f5;

	--accent-primary: #add34e;
	--accent-shaded: color-mix(in srgb, var(--interactive-accent), black 20%);

	--background-primary: var(--tg-theme-bg-color, var(--mono-100));
	--background-primary-alt: #1e2933;
	--background-secondary: var(--tg-theme-secondary-bg-color, var(--mono-300));
	--background-secondary-alt: #364150;

	--background-modifier-border: rgba(255, 255, 255, 0.15);
	--background-modifier-border-hover: rgba(255, 255, 255, 0.25);
	--background-modifier-hover: rgba(255, 255, 255, 0.08);
	--background-modifier-active: rgba(255, 255, 255, 0.12);
	--background-modifier-back-30: rgba(255, 255, 255, 0.15);
	--background-modifier-overlay: rgba(0, 0, 0, 0.65);

	--interactive-accent: var(--tg-theme-button-color, var(--accent-primary));
	--interactive-accent-soft: color-mix(in srgb, var(--interactive-accent), transparent 85%);
	--divider-color: var(--background-modifier-border);

	--text-normal: var(--tg-theme-text-color, var(--mono-900));
	--text-muted: var(--tg-theme-hint-color, #708499);
	--text-on-accent: var(--tg-theme-button-text-color, #212121);
	--text-link: var(--tg-theme-link-color, var(--accent-primary));
	--text-error: var(--tg-theme-destructive-text-color, #da6362);

	--bubble-bg-own: var(--interactive-accent-soft);
	--bubble-bg-other: var(--background-primary-alt);
	--bubble-bg-own-shaded: var(--accent-shaded);

	--alert-error-bg: rgba(218, 99, 98, 0.12);
	--alert-error-border: rgba(218, 99, 98, 0.4);
	--alert-success-bg: rgba(76, 175, 80, 0.12);
	
	--shadow-color: rgba(0, 0, 0, 0.4);
	--shadow-color-soft: rgba(0, 0, 0, 0.2);
	--scrollbar-thumb-bg: rgba(255, 255, 255, 0.15);
	--scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.25);
	--scrollbar-bg: rgba(255, 255, 255, 0.05);

	--checkbox-border-color: var(--background-modifier-border);
}