/* ===================================
   CRAYONS DESIGN SYSTEM - UTILITIES
   Helper classes per rapid prototyping
   Local Hours v1.0
   =================================== */

/* ===================================
   TEXT UTILITIES
   =================================== */

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

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

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

/* Text colors */
.crayons-text-primary { color: var(--crayons-primary-600); }
.crayons-text-secondary { color: var(--crayons-secondary-600); }
.crayons-text-success { color: var(--crayons-success-700); }
.crayons-text-warning { color: var(--crayons-warning-700); }
.crayons-text-error { color: var(--crayons-error-700); }
.crayons-text-gray { color: var(--crayons-gray-600); }
.crayons-text-muted { color: var(--crayons-gray-500); }

/* Text transform */
.crayons-uppercase { text-transform: uppercase; }
.crayons-lowercase { text-transform: lowercase; }
.crayons-capitalize { text-transform: capitalize; }

/* Text truncate */
.crayons-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crayons-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crayons-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

/* Margin */
.crayons-m-0 { margin: var(--crayons-space-0); }
.crayons-m-1 { margin: var(--crayons-space-1); }
.crayons-m-2 { margin: var(--crayons-space-2); }
.crayons-m-3 { margin: var(--crayons-space-3); }
.crayons-m-4 { margin: var(--crayons-space-4); }
.crayons-m-6 { margin: var(--crayons-space-6); }
.crayons-m-8 { margin: var(--crayons-space-8); }

/* Margin top/bottom/left/right */
.crayons-mt-0 { margin-top: var(--crayons-space-0); }
.crayons-mt-2 { margin-top: var(--crayons-space-2); }
.crayons-mt-4 { margin-top: var(--crayons-space-4); }
.crayons-mt-6 { margin-top: var(--crayons-space-6); }
.crayons-mt-8 { margin-top: var(--crayons-space-8); }

.crayons-mb-0 { margin-bottom: var(--crayons-space-0); }
.crayons-mb-2 { margin-bottom: var(--crayons-space-2); }
.crayons-mb-4 { margin-bottom: var(--crayons-space-4); }
.crayons-mb-6 { margin-bottom: var(--crayons-space-6); }
.crayons-mb-8 { margin-bottom: var(--crayons-space-8); }

/* Padding */
.crayons-p-0 { padding: var(--crayons-space-0); }
.crayons-p-1 { padding: var(--crayons-space-1); }
.crayons-p-2 { padding: var(--crayons-space-2); }
.crayons-p-3 { padding: var(--crayons-space-3); }
.crayons-p-4 { padding: var(--crayons-space-4); }
.crayons-p-6 { padding: var(--crayons-space-6); }
.crayons-p-8 { padding: var(--crayons-space-8); }

/* Gap */
.crayons-gap-1 { gap: var(--crayons-space-1); }
.crayons-gap-2 { gap: var(--crayons-space-2); }
.crayons-gap-3 { gap: var(--crayons-space-3); }
.crayons-gap-4 { gap: var(--crayons-space-4); }
.crayons-gap-6 { gap: var(--crayons-space-6); }

/* ===================================
   BACKGROUND UTILITIES
   =================================== */

.crayons-bg-primary { background: var(--crayons-primary-500); }
.crayons-bg-secondary { background: var(--crayons-secondary-500); }
.crayons-bg-success { background: var(--crayons-success-500); }
.crayons-bg-warning { background: var(--crayons-warning-500); }
.crayons-bg-error { background: var(--crayons-error-500); }
.crayons-bg-gray { background: var(--crayons-gray-100); }
.crayons-bg-white { background: white; }

/* Gradient backgrounds */
.crayons-bg-gradient-primary { background: var(--crayons-gradient-primary); }
.crayons-bg-gradient-secondary { background: var(--crayons-gradient-secondary); }
.crayons-bg-gradient-success { background: var(--crayons-gradient-success); }

/* ===================================
   BORDER UTILITIES
   =================================== */

.crayons-border { border: var(--crayons-border-width-thin) solid var(--crayons-border-color-light); }
.crayons-border-2 { border: var(--crayons-border-width-medium) solid var(--crayons-border-color-light); }
.crayons-border-primary { border-color: var(--crayons-primary-500); }
.crayons-border-secondary { border-color: var(--crayons-secondary-500); }

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

/* ===================================
   SHADOW UTILITIES
   =================================== */

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

/* ===================================
   ANIMATION UTILITIES
   =================================== */

.crayons-transition { transition: all var(--crayons-transition-base) var(--crayons-ease-out); }
.crayons-transition-fast { transition: all var(--crayons-transition-fast) var(--crayons-ease-out); }
.crayons-transition-slow { transition: all var(--crayons-transition-slow) var(--crayons-ease-out); }

/* Fade animations */
.crayons-fade-in {
  animation: crayons-fade-in 0.3s ease-out;
}

@keyframes crayons-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Scale animations */
.crayons-scale-in {
  animation: crayons-scale-in 0.3s var(--crayons-ease-out);
}

@keyframes crayons-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hover effects */
.crayons-hover-lift {
  transition: transform var(--crayons-transition-base);
}

.crayons-hover-lift:hover {
  transform: translateY(-4px);
}

.crayons-hover-scale {
  transition: transform var(--crayons-transition-base);
}

.crayons-hover-scale:hover {
  transform: scale(1.05);
}

/* ===================================
   POSITION UTILITIES
   =================================== */

.crayons-relative { position: relative; }
.crayons-absolute { position: absolute; }
.crayons-fixed { position: fixed; }
.crayons-sticky { position: sticky; }

/* ===================================
   OPACITY UTILITIES
   =================================== */

.crayons-opacity-0 { opacity: var(--crayons-opacity-0); }
.crayons-opacity-50 { opacity: var(--crayons-opacity-50); }
.crayons-opacity-75 { opacity: var(--crayons-opacity-75); }
.crayons-opacity-100 { opacity: var(--crayons-opacity-100); }

/* ===================================
   CURSOR UTILITIES
   =================================== */

.crayons-cursor-pointer { cursor: pointer; }
.crayons-cursor-not-allowed { cursor: not-allowed; }
.crayons-cursor-default { cursor: default; }

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

.crayons-overflow-hidden { overflow: hidden; }
.crayons-overflow-auto { overflow: auto; }
.crayons-overflow-scroll { overflow: scroll; }
.crayons-overflow-x-hidden { overflow-x: hidden; }
.crayons-overflow-y-auto { overflow-y: auto; }

/* ===================================
   ACCESSIBILITY UTILITIES
   =================================== */

.crayons-focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.3);
}

.crayons-focus-visible:focus-visible {
  outline: 2px solid var(--crayons-primary-500);
  outline-offset: 2px;
}

/* ===================================
   INTERACTION STATES
   =================================== */

.crayons-interactive {
  cursor: pointer;
  transition: all var(--crayons-transition-base);
}

.crayons-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--crayons-shadow-md);
}

.crayons-interactive:active {
  transform: translateY(0);
}

/* ===================================
   DIVIDERS
   =================================== */

.crayons-divider {
  height: 1px;
  background: var(--crayons-border-color-light);
  margin: var(--crayons-space-4) 0;
}

.crayons-divider--thick {
  height: 2px;
}

.crayons-divider--vertical {
  width: 1px;
  height: 100%;
  margin: 0 var(--crayons-space-4);
}

/* ===================================
   ASPECT RATIOS
   =================================== */

.crayons-aspect-square {
  aspect-ratio: 1 / 1;
}

.crayons-aspect-video {
  aspect-ratio: 16 / 9;
}

.crayons-aspect-portrait {
  aspect-ratio: 3 / 4;
}

/* ===================================
   SCROLL BEHAVIOR
   =================================== */

.crayons-scroll-smooth {
  scroll-behavior: smooth;
}

.crayons-scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.crayons-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ===================================
   PRINT UTILITIES
   =================================== */

@media print {
  .crayons-print-hide {
    display: none !important;
  }
}