/* =====================================================
   PATDRAW UTILITY CLASSES
   Reusable utility classes for common patterns
   ===================================================== */

/* =====================================================
   LAYOUT UTILITIES
   ===================================================== */

/* Display */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

/* Flexbox */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Flex alignment */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Common flex patterns */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.flex-justify-center {
  display: flex;
  justify-content: center;
}

/* Flex sizing */
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }
.flex-grow { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }
.flex-no-shrink { flex-shrink: 0; }

/* Grid */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* =====================================================
   SPACING UTILITIES
   ===================================================== */

/* Padding - All sides */
.p-0 { padding: var(--spacing-0); }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

/* Padding - Horizontal */
.px-0 { padding-right: var(--spacing-0); padding-left: var(--spacing-0); }
.px-1 { padding-right: var(--spacing-1); padding-left: var(--spacing-1); }
.px-2 { padding-right: var(--spacing-2); padding-left: var(--spacing-2); }
.px-3 { padding-right: var(--spacing-3); padding-left: var(--spacing-3); }
.px-4 { padding-right: var(--spacing-4); padding-left: var(--spacing-4); }
.px-5 { padding-right: var(--spacing-5); padding-left: var(--spacing-5); }
.px-6 { padding-right: var(--spacing-6); padding-left: var(--spacing-6); }

/* Padding - Vertical */
.py-0 { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }

/* Padding - Individual sides */
.pt-0 { padding-top: var(--spacing-0); }
.pt-1 { padding-top: var(--spacing-1); }
.pt-2 { padding-top: var(--spacing-2); }
.pt-3 { padding-top: var(--spacing-3); }
.pt-4 { padding-top: var(--spacing-4); }

.pb-0 { padding-bottom: var(--spacing-0); }
.pb-1 { padding-bottom: var(--spacing-1); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-3 { padding-bottom: var(--spacing-3); }
.pb-4 { padding-bottom: var(--spacing-4); }

.pl-0 { padding-left: var(--spacing-0); }
.pl-1 { padding-left: var(--spacing-1); }
.pl-2 { padding-left: var(--spacing-2); }
.pl-3 { padding-left: var(--spacing-3); }
.pl-4 { padding-left: var(--spacing-4); }

.pr-0 { padding-right: var(--spacing-0); }
.pr-1 { padding-right: var(--spacing-1); }
.pr-2 { padding-right: var(--spacing-2); }
.pr-3 { padding-right: var(--spacing-3); }
.pr-4 { padding-right: var(--spacing-4); }

/* Margin - All sides */
.m-0 { margin: var(--spacing-0); }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-auto { margin: auto; }

/* Margin - Horizontal */
.mx-0 { margin-right: var(--spacing-0); margin-left: var(--spacing-0); }
.mx-1 { margin-right: var(--spacing-1); margin-left: var(--spacing-1); }
.mx-2 { margin-right: var(--spacing-2); margin-left: var(--spacing-2); }
.mx-3 { margin-right: var(--spacing-3); margin-left: var(--spacing-3); }
.mx-4 { margin-right: var(--spacing-4); margin-left: var(--spacing-4); }
.mx-auto { margin-right: auto; margin-left: auto; }

/* Margin - Vertical */
.my-0 { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }
.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }

/* Margin - Individual sides */
.mt-0 { margin-top: var(--spacing-0); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: var(--spacing-0); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-auto { margin-bottom: auto; }

.ml-0 { margin-left: var(--spacing-0); }
.ml-1 { margin-left: var(--spacing-1); }
.ml-2 { margin-left: var(--spacing-2); }
.ml-3 { margin-left: var(--spacing-3); }
.ml-4 { margin-left: var(--spacing-4); }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: var(--spacing-0); }
.mr-1 { margin-right: var(--spacing-1); }
.mr-2 { margin-right: var(--spacing-2); }
.mr-3 { margin-right: var(--spacing-3); }
.mr-4 { margin-right: var(--spacing-4); }
.mr-auto { margin-right: auto; }

/* Gap (for flexbox and grid) */
.gap-0 { gap: var(--spacing-0); }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-5 { gap: var(--spacing-5); }
.gap-6 { gap: var(--spacing-6); }

/* =====================================================
   TYPOGRAPHY UTILITIES
   ===================================================== */

/* Font size */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

/* Font weight */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

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

/* Text color */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-disabled { color: var(--color-text-disabled); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

/* Line height */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* Text decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Font family */
.font-sans { font-family: var(--font-family-base); }
.font-mono { font-family: var(--font-family-mono); }
.font-serif { font-family: var(--font-family-serif); }

/* =====================================================
   SIZING UTILITIES
   ===================================================== */

/* Width */
.w-full { width: 100%; }
.w-half { width: 50%; }
.w-auto { width: auto; }
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }

/* Height */
.h-full { height: 100%; }
.h-half { height: 50%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.h-min { height: min-content; }
.h-max { height: max-content; }
.h-fit { height: fit-content; }

/* Min/Max width */
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.max-w-none { max-width: none; }
.max-w-full { max-width: 100%; }

/* Min/Max height */
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-h-none { max-height: none; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }

/* =====================================================
   POSITIONING UTILITIES
   ===================================================== */

.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Position values */
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.inset-0 { inset: 0; }

/* Z-index */
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* =====================================================
   VISUAL UTILITIES
   ===================================================== */

/* Background color */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: #ffffff; }
.bg-panel { background-color: var(--color-bg-panel); }
.bg-canvas { background-color: var(--color-bg-canvas); }
.bg-accent { background-color: var(--color-accent-bg); }

/* Border */
.border { border: var(--border-width-thin) solid var(--color-border-default); }
.border-0 { border: 0; }
.border-t { border-top: var(--border-width-thin) solid var(--color-border-default); }
.border-r { border-right: var(--border-width-thin) solid var(--color-border-default); }
.border-b { border-bottom: var(--border-width-thin) solid var(--color-border-default); }
.border-l { border-left: var(--border-width-thin) solid var(--color-border-default); }

/* Border radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }

/* Shadow */
.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* =====================================================
   INTERACTION UTILITIES
   ===================================================== */

/* Cursor */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-move { cursor: move; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-text { cursor: text; }
.cursor-crosshair { cursor: crosshair; }

/* User select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* Pointer events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* =====================================================
   OVERFLOW UTILITIES
   ===================================================== */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

/* =====================================================
   TRANSITION UTILITIES
   ===================================================== */

.transition-none { transition: none; }
.transition-all { transition: all var(--transition-normal); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }
.transition-colors { transition: color, background-color, border-color var(--transition-normal); }
.transition-opacity { transition: opacity var(--transition-normal); }
.transition-transform { transition: transform var(--transition-normal); }

/* =====================================================
   DRAWING-SPECIFIC UTILITIES
   ===================================================== */

/* Tool states */
.tool-active {
  background-color: var(--color-bg-tool-active);
  outline: var(--tool-outline-active);
  outline-offset: -2px;
}

.tool-hover {
  background-color: var(--color-bg-tool-hover);
  box-shadow: var(--tool-shadow-hover);
}

/* Canvas helpers */
.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.canvas-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.canvas-interactive {
  pointer-events: auto;
}

/* Panel utilities */
.panel {
  padding: var(--panel-padding);
  background-color: var(--color-bg-panel);
  border-radius: var(--panel-border-radius);
  box-shadow: var(--panel-shadow);
}

.panel-header {
  transition: opacity var(--transition-normal);
  cursor: grab;
  user-select: none;
}

.panel-header:active {
  cursor: grabbing;
}

/* Drawing element states */
.element-selected {
  outline: var(--selection-stroke-width) solid var(--selection-color);
  outline-offset: 2px;
}

.element-hover {
  opacity: 0.8;
  cursor: pointer;
}

.element-dragging {
  opacity: 0.6;
  cursor: move;
}