/* =================================================================
   Canvas Lighting Designer - Main CSS Entry Point
   ITCSS Architecture Implementation
   
   Import order is critical - follows ITCSS inverted triangle:
   Settings → Tools → Generic → Elements → Objects → Components → Themes → Utilities
   ================================================================= */

/* ============================================================
   LAYER 1: SETTINGS
   Design tokens, CSS variables, configuration
   ============================================================ */
@import url('./01-settings/tokens.css');
@import url('./01-settings/colors.css');
@import url('./01-settings/typography.css');
@import url('./01-settings/spacing.css');
@import url('./01-settings/shadows.css');
@import url('./01-settings/animations.css');
@import url('./01-settings/breakpoints.css');

/* ============================================================
   LAYER 2: TOOLS
   Mixins, functions, helpers (currently empty - for future SCSS)
   ============================================================ */
/* @import url('./02-tools/mixins.css'); */

/* ============================================================
   LAYER 3: GENERIC
   Reset, normalize, box-sizing, fonts
   ============================================================ */
@import url('./03-generic/reset.css');
@import url('./03-generic/box-sizing.css');
@import url('./03-generic/fonts.css');

/* ============================================================
   LAYER 4: ELEMENTS
   Bare HTML element styles (no classes)
   ============================================================ */
/* @import url('./04-elements/headings.css'); */
/* @import url('./04-elements/forms.css'); */
/* @import url('./04-elements/buttons.css'); */
/* @import url('./04-elements/links.css'); */

/* ============================================================
   LAYER 5: OBJECTS
   Layout patterns, no cosmetics
   ============================================================ */
/* @import url('./05-objects/container.css'); */
/* @import url('./05-objects/grid.css'); */
/* @import url('./05-objects/layout.css'); */
/* @import url('./05-objects/stack.css'); */
/* @import url('./05-objects/media.css'); */

/* ============================================================
   LAYER 6: COMPONENTS
   Designed UI components
   ============================================================ */
@import url('./06-components/app-layout.css');
@import url('./06-components/menu.css');
@import url('./06-components/form-dropdown.css');
@import url('./06-components/toolbar.css');
@import url('./06-components/button.css');
@import url('./minimal-modal.css'); /* Minimal modal system - all modals use this */
@import url('./auth-modal.css'); /* Auth modal (login/register) */
@import url('./login-page.css'); /* Login page and user status */
/* @import url('./06-components/panel.css'); */
/* @import url('./06-components/form-field.css'); */
/* @import url('./06-components/canvas.css'); */
/* @import url('./06-components/ruler.css'); */
@import url('./06-components/indicators.css'); /* Zoom & Scale indicators (legacy - will be replaced) */
@import url('./06-components/view-controls-panel.css'); /* Unified View Controls Panel */
/* @import url('./06-components/context-menu.css'); */
@import url('./06-components/properties-panel.css');
@import url('./06-components/properties-panel-collapsible.css'); /* Collapsible panel behavior (desktop + mobile) */
@import url('./06-components/floating-note.css'); /* Floating notes / annotations */
@import url('./06-components/subtoolbar.css'); /* Horizontal sub-toolbars (Align, Snap, etc.) */
@import url('./06-components/legend.css'); /* Legend panel (USITT 2.3.8.4) */
/* @import url('./06-components/performance-monitor.css'); */

/* ============================================================
   LAYER 7: THEMES
   Theme overrides and variations
   ============================================================ */
@import url('./07-themes/theme-light.css');
@import url('./07-themes/theme-dark.css');
@import url('./07-themes/theme-high-contrast.css');

/* ============================================================
   LAYER 8: UTILITIES
   Helper classes with !important
   ============================================================ */
/* @import url('./08-utilities/display.css'); */
/* @import url('./08-utilities/spacing.css'); */
/* @import url('./08-utilities/text.css'); */
/* @import url('./08-utilities/flex.css'); */
/* @import url('./08-utilities/position.css'); */
/* @import url('./08-utilities/colors.css'); */

/* ============================================================
   TEMPORARY: Import existing styles during migration
   Remove these as components are migrated to new architecture
   ============================================================ */
/* TODO: Remove after migration complete */
/* @import url('./main.css'); */

/* ============================================================
   APPLICATION ROOT STYLES
   ============================================================ */
:root {
  /* Application defaults */
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

/* Ensure full viewport coverage */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* Canvas app - no page scroll */
}

/* Main application container */
#app,
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   DEVELOPMENT HELPERS (remove in production)
   ============================================================ */
.dev-grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: var(--z-max);
  background-image: 
    repeating-linear-gradient(
      0deg,
      rgba(255, 0, 0, 0.03),
      rgba(255, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 8px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.03),
      rgba(255, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 8px
    );
  display: none;
}

.dev-grid-overlay.active {
  display: block;
}