/**
 * VistaKine Main CSS
 *
 * === CSS ARCHITECTURE GUIDE (FOR CLAUDE) ===
 *
 * ORGANIZATION:
 * - CSS is organized by component in separate files
 * - Each component should be self-contained with its styles and media queries
 * - Media queries should be grouped at the end of each component section
 *
 * FILE STRUCTURE:
 * - base/: Foundational styles, variables, typography
 * - components/: Individual UI components
 * - layout/: Page structure and grid systems
 * - utils/: Helpers and utility classes
 *
 * COMPONENT PATTERN:
 * .component {
 *   Base styles
 * }
 *
 * .component__element {
 *   Element styles
 * }
 *
 * @media (max-width: 768px) {
 *   .component {
 *     Tablet styles
 *   }
 * }
 *
 * STANDARD BREAKPOINTS:
 * - Mobile: max-width: 479px
 * - Tablet: min-width: 480px and max-width: 991px
 * - Desktop: min-width: 992px
 */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter:wght@400;500;600;700&display=swap');

/* Base styles */
@import 'base/variables.css';
@import 'base/typography.css';
@import 'base/global.css';

/* Layout */
@import 'layout/grid.css';
@import 'layout/sections.css';

/* Components */
@import 'components/sidebar.css';
@import 'components/features.css';
@import 'components/content-sections.css';
@import 'components/settings-panel.css';
@import 'components/visualization.css';
@import 'components/cover.css';

/* Utilities */
@import 'utils/breakpoints.css';
@import 'utils/states.css';

/* Map theme-light/dark to our root.light-theme/dark-theme for backward compatibility */
body.theme-light {
	/* No special styling needed - this is the default */
}

body.theme-dark {
	/* This ensures components using the theme-dark class will still work */
	background-color: var(--body-bg-color);
	color: var(--text-color);
}

/* Accessibility styles */
.reduced-motion,
.reduced-motion * {
	transition-duration: 0.001s !important;
	animation-duration: 0.001s !important;
}

.disable-animations,
.disable-animations * {
	transition: none !important;
	animation: none !important;
}

html {
	scroll-behavior: smooth;
}

.reduced-motion html {
	scroll-behavior: auto;
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: var(--body-font);
	line-height: 1.6;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-size: var(--text-base-size);
}

img {
	max-width: 100%;
	height: auto;
}

/* Force dark theme to properly apply with higher specificity */
:root.dark-theme body {
	background-color: var(--body-bg-color);
	color: var(--text-color);
}

/* Force theme-specific link colors for dark mode */
:root.dark-theme a:not([class]) {
	color: var(--link-color);
}

:root.dark-theme a:not([class]):hover {
	color: var(--link-color-hover);
}

:root.dark-theme a:not([class]):active {
	color: var(--link-color-active);
}

/* Fix all buttons to use the chalk theme in dark mode */
:root.dark-theme button,
:root.dark-theme .button {
	color: var(--text-color);
	border-color: var(--border-color);
}

:root.dark-theme button:hover,
:root.dark-theme .button:hover {
	background-color: var(--hover-bg);
	color: var(--hover-color);
}