/**
 * Infitwin Design System - Master Import
 * 
 * This file imports all design system components and should be included
 * BEFORE any component-specific CSS files.
 * 
 * Import order is important - colors and spacing are used by typography.
 */

/* Core Design System Files */
@import './design-system/colors.css';
@import './design-system/spacing.css';
@import './design-system/typography.css';

/* Component Styles - Import unified components */
@import './components/modal.css';
@import './components/button.css';
@import './components/form.css';
@import './components/avatar.css';
@import './components/search.css';

/**
 * Global Reset and Base Styles
 * Establishes consistent foundation across all browsers
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* Base font size for rem calculations */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  
  /* Prevent horizontal scroll */
  overflow-x: hidden;
}

/* Ensure images and media are responsive by default */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Remove default button styles */
button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* Remove default list styles */
ul,
ol {
  list-style: none;
}

/* Remove default link styles */
a {
  color: inherit;
  text-decoration: none;
}

/* Improve focus indicators for accessibility */
*:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Hide focus indicators for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/**
 * Utility Classes for Common Design Patterns
 * These prevent the need to create component-specific CSS for common needs
 */

/* Display Utilities */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flexbox Utilities */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

/* Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Width and Height Utilities */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Border Radius */
.rounded-sm { border-radius: 4px; }
.rounded { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-full { border-radius: 50%; }

/* Shadow Utilities */
.shadow-sm { box-shadow: 0 1px 2px var(--color-shadow-light); }
.shadow { box-shadow: 0 1px 3px var(--color-shadow-medium); }
.shadow-lg { box-shadow: 0 4px 6px var(--color-shadow-medium); }
.shadow-xl { box-shadow: 0 10px 15px var(--color-shadow-dark); }

/**
 * USAGE INSTRUCTIONS:
 * 
 * 1. Include this file in your HTML before any component CSS:
 *    <link rel="stylesheet" href="css/design-system.css">
 * 
 * 2. Use design system tokens in your components:
 *    .my-component {
 *      background-color: var(--color-background-card);
 *      padding: var(--spacing-card-padding);
 *      font-size: var(--font-size-base);
 *    }
 * 
 * 3. Use utility classes for common patterns:
 *    <div class="flex items-center gap-md p-lg rounded shadow">
 * 
 * 4. NEVER use hardcoded values that exist as design tokens
 */