/**
 * ============================================================================
 * CTT DESIGN SYSTEM - COMPREHENSIVE UTILITY CLASSES
 * ============================================================================
 * 
 * Complete utility class system built on CTT design tokens.
 * All utilities use BASE TOKENS to ensure consistency and maintainability.
 * 
 * Token Hierarchy:
 * Brand Tokens → Core Tokens → Base Tokens → Utility Classes
 * 
 * This file provides utilities for:
 * - Borders (color, style, radius, width)
 * - Shadows and elevation
 * - Opacity and transparency
 * - Sizing (width, height, sizing scales)
 * - Aspect ratios
 * - Transitions and animations
 * - Cursor and pointer events
 * - Text properties
 * - Visibility and display utilities
 * - Z-index layering
 * - Additional compositional utilities
 * 
 * ============================================================================
 */

/* ==========================================================================
   BORDER COLOR UTILITIES - SEMANTIC (BASE TOKENS)
   ========================================================================== */

/* Semantic border colors */
.ctt-border-subtle {
  border-color: var(--ctt-base-border-subtle) !important;
}

.ctt-border-default {
  border-color: var(--ctt-base-border-default) !important;
}

.ctt-border-strong {
  border-color: var(--ctt-base-border-strong) !important;
}

.ctt-border-focus {
  border-color: var(--ctt-base-border-focus) !important;
}

.ctt-border-negative {
  border-color: var(--ctt-base-border-negative) !important;
}

.ctt-border-primary {
  border-color: var(--ctt-base-border-primary) !important;
}

.ctt-border-warning {
  border-color: var(--ctt-base-border-warning) !important;
}

.ctt-border-success {
  border-color: var(--ctt-base-border-success) !important;
}

.ctt-border-highlight {
  border-color: var(--ctt-base-border-highlight) !important;
}

.ctt-border-hover {
  border-color: var(--ctt-base-border-hover) !important;
}

.ctt-border-selected {
  border-color: var(--ctt-base-border-selected) !important;
}

.ctt-border-disabled {
  border-color: var(--ctt-base-border-disabled) !important;
}

/* Direct color scale borders */
.ctt-border-primary-50 {
  border-color: var(--ctt-core-color-primary-50) !important;
}

.ctt-border-primary-500 {
  border-color: var(--ctt-core-color-primary-500) !important;
}

.ctt-border-primary-600 {
  border-color: var(--ctt-core-color-primary-600) !important;
}

.ctt-border-neutral-200 {
  border-color: var(--ctt-core-color-neutral-200) !important;
}

.ctt-border-neutral-300 {
  border-color: var(--ctt-core-color-neutral-300) !important;
}

.ctt-border-neutral-500 {
  border-color: var(--ctt-core-color-neutral-500) !important;
}

.ctt-border-neutral-700 {
  border-color: var(--ctt-core-color-neutral-700) !important;
}

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

.ctt-border-solid {
  border-style: solid !important;
}

.ctt-border-dashed {
  border-style: dashed !important;
}

.ctt-border-dotted {
  border-style: dotted !important;
}

.ctt-border-double {
  border-style: double !important;
}

.ctt-border-none {
  border-style: none !important;
}

/* ==========================================================================
   BORDER WIDTH UTILITIES (Using Core Border Width Tokens)
   ========================================================================== */

/* All sides border width */
.ctt-border-0 {
  border-style: solid;
  border-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-1 {
  border-style: solid;
  border-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-2 {
  border-style: solid;
  border-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-3 {
  border-style: solid;
  border-width: var(--ctt-core-border-width-thick) !important;
}

/* Individual sides border width */
.ctt-border-t-0 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-t-1 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-t-2 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-t-3 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-thick) !important;
}

.ctt-border-r-0 {
  border-style: solid;
  border-right-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-r-1 {
  border-style: solid;
  border-right-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-r-2 {
  border-style: solid;
  border-right-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-r-3 {
  border-style: solid;
  border-right-width: var(--ctt-core-border-width-thick) !important;
}

.ctt-border-b-0 {
  border-style: solid;
  border-bottom-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-b-1 {
  border-style: solid;
  border-bottom-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-b-2 {
  border-style: solid;
  border-bottom-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-b-3 {
  border-style: solid;
  border-bottom-width: var(--ctt-core-border-width-thick) !important;
}

.ctt-border-l-0 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-l-1 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-l-2 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-l-3 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-thick) !important;
}

/* Horizontal and border-style: solid ; vertical borders */
.ctt-border-x-0 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-none) !important;
  border-right-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-x-1 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-hairline) !important;
  border-right-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-x-2 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-thin) !important;
  border-right-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-x-3 {
  border-style: solid;
  border-left-width: var(--ctt-core-border-width-thick) !important;
  border-right-width: var(--ctt-core-border-width-thick) !important;
}

.ctt-border-y-0 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-none) !important;
  border-bottom-width: var(--ctt-core-border-width-none) !important;
}

.ctt-border-y-1 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-hairline) !important;
  border-bottom-width: var(--ctt-core-border-width-hairline) !important;
}

.ctt-border-y-2 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-thin) !important;
  border-bottom-width: var(--ctt-core-border-width-thin) !important;
}

.ctt-border-y-3 {
  border-style: solid;
  border-top-width: var(--ctt-core-border-width-thick) !important;
  border-bottom-width: var(--ctt-core-border-width-thick) !important;
}

/* ==========================================================================
   BORDER RADIUS UTILITIES (Using Core Radius Tokens)
   ========================================================================== */

/* All corners */
.ctt-rounded-0 {
  border-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-2xs {
  border-radius: var(--ctt-core-radius-2xs) !important;
}

.ctt-rounded-xs {
  border-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-sm {
  border-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-md {
  border-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-lg {
  border-radius: var(--ctt-core-radius-lg) !important;
}

.ctt-rounded-xl {
  border-radius: var(--ctt-core-radius-xl) !important;
}

.ctt-rounded-2xl {
  border-radius: var(--ctt-core-radius-2xl) !important;
}

.ctt-rounded-full {
  border-radius: var(--ctt-core-radius-pill) !important;
}

/* Individual corners - Top Left */
.ctt-rounded-tl-0 {
  border-top-left-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-tl-xs {
  border-top-left-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-tl-sm {
  border-top-left-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-tl-md {
  border-top-left-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-tl-lg {
  border-top-left-radius: var(--ctt-core-radius-lg) !important;
}

/* Individual corners - Top Right */
.ctt-rounded-tr-0 {
  border-top-right-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-tr-xs {
  border-top-right-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-tr-sm {
  border-top-right-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-tr-md {
  border-top-right-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-tr-lg {
  border-top-right-radius: var(--ctt-core-radius-lg) !important;
}

/* Individual corners - Bottom Left */
.ctt-rounded-bl-0 {
  border-bottom-left-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-bl-xs {
  border-bottom-left-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-bl-sm {
  border-bottom-left-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-bl-md {
  border-bottom-left-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-bl-lg {
  border-bottom-left-radius: var(--ctt-core-radius-lg) !important;
}

/* Individual corners - Bottom Right */
.ctt-rounded-br-0 {
  border-bottom-right-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-br-xs {
  border-bottom-right-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-br-sm {
  border-bottom-right-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-br-md {
  border-bottom-right-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-br-lg {
  border-bottom-right-radius: var(--ctt-core-radius-lg) !important;
}

/* Top sides */
.ctt-rounded-t-0 {
  border-top-left-radius: var(--ctt-core-radius-none) !important;
  border-top-right-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-t-xs {
  border-top-left-radius: var(--ctt-core-radius-xs) !important;
  border-top-right-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-t-sm {
  border-top-left-radius: var(--ctt-core-radius-sm) !important;
  border-top-right-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-t-md {
  border-top-left-radius: var(--ctt-core-radius-md) !important;
  border-top-right-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-t-lg {
  border-top-left-radius: var(--ctt-core-radius-lg) !important;
  border-top-right-radius: var(--ctt-core-radius-lg) !important;
}

/* Bottom sides */
.ctt-rounded-b-0 {
  border-bottom-left-radius: var(--ctt-core-radius-none) !important;
  border-bottom-right-radius: var(--ctt-core-radius-none) !important;
}

.ctt-rounded-b-xs {
  border-bottom-left-radius: var(--ctt-core-radius-xs) !important;
  border-bottom-right-radius: var(--ctt-core-radius-xs) !important;
}

.ctt-rounded-b-sm {
  border-bottom-left-radius: var(--ctt-core-radius-sm) !important;
  border-bottom-right-radius: var(--ctt-core-radius-sm) !important;
}

.ctt-rounded-b-md {
  border-bottom-left-radius: var(--ctt-core-radius-md) !important;
  border-bottom-right-radius: var(--ctt-core-radius-md) !important;
}

.ctt-rounded-b-lg {
  border-bottom-left-radius: var(--ctt-core-radius-lg) !important;
  border-bottom-right-radius: var(--ctt-core-radius-lg) !important;
}

/* ==========================================================================
   SHADOW UTILITIES (Using Base Tokens)
   ========================================================================== */

/* No shadow */
.ctt-shadow-none {
  box-shadow: none !important;
}

/* Subtle shadow - elevated elements */
.ctt-shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Medium shadow - interactive elements, cards */
.ctt-shadow-md {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Large shadow - modals, tooltips */
.ctt-shadow-lg {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Extra large shadow - dropdowns, popovers */
.ctt-shadow-xl {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Extra extra large shadow - floating panels */
.ctt-shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Focus shadow - keyboard navigation */
.ctt-shadow-focus {
  box-shadow: 0 0 0 3px var(--ctt-base-border-focus) !important;
}

/* Inset shadow */
.ctt-shadow-inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

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

.ctt-opacity-0 {
  opacity: 0 !important;
}

.ctt-opacity-5 {
  opacity: 0.05 !important;
}

.ctt-opacity-10 {
  opacity: 0.1 !important;
}

.ctt-opacity-20 {
  opacity: 0.2 !important;
}

.ctt-opacity-25 {
  opacity: 0.25 !important;
}

.ctt-opacity-30 {
  opacity: 0.3 !important;
}

.ctt-opacity-40 {
  opacity: 0.4 !important;
}

.ctt-opacity-50 {
  opacity: 0.5 !important;
}

.ctt-opacity-60 {
  opacity: 0.6 !important;
}

.ctt-opacity-70 {
  opacity: 0.7 !important;
}

.ctt-opacity-75 {
  opacity: 0.75 !important;
}

.ctt-opacity-80 {
  opacity: 0.8 !important;
}

.ctt-opacity-90 {
  opacity: 0.9 !important;
}

.ctt-opacity-95 {
  opacity: 0.95 !important;
}

.ctt-opacity-100 {
  opacity: 1 !important;
}

/* ==========================================================================
   SIZING UTILITIES (Using Core Space and Size Tokens)
   ========================================================================== */

/* Width sizing */
.ctt-w-0 {
  width: var(--ctt-core-space-0) !important;
}

.ctt-w-1 {
  width: var(--ctt-core-space-1) !important;
}

.ctt-w-2 {
  width: var(--ctt-core-space-2) !important;
}

.ctt-w-3 {
  width: var(--ctt-core-space-3) !important;
}

.ctt-w-4 {
  width: var(--ctt-core-space-4) !important;
}

.ctt-w-6 {
  width: var(--ctt-core-space-6) !important;
}

.ctt-w-8 {
  width: var(--ctt-core-space-8) !important;
}

.ctt-w-10 {
  width: var(--ctt-core-space-10) !important;
}

.ctt-w-12 {
  width: var(--ctt-core-space-12) !important;
}

/* Height sizing */
.ctt-h-0 {
  height: var(--ctt-core-space-0) !important;
}

.ctt-h-1 {
  height: var(--ctt-core-space-1) !important;
}

.ctt-h-2 {
  height: var(--ctt-core-space-2) !important;
}

.ctt-h-3 {
  height: var(--ctt-core-space-3) !important;
}

.ctt-h-4 {
  height: var(--ctt-core-space-4) !important;
}

.ctt-h-6 {
  height: var(--ctt-core-space-6) !important;
}

.ctt-h-8 {
  height: var(--ctt-core-space-8) !important;
}

.ctt-h-10 {
  height: var(--ctt-core-space-10) !important;
}

.ctt-h-12 {
  height: var(--ctt-core-space-12) !important;
}

/* Icon size utilities */
.ctt-icon-xs {
  width: var(--ctt-core-size-icon-xs) !important;
  height: var(--ctt-core-size-icon-xs) !important;
}

.ctt-icon-s {
  width: var(--ctt-core-size-icon-s) !important;
  height: var(--ctt-core-size-icon-s) !important;
}

.ctt-icon-m {
  width: var(--ctt-core-size-icon-m) !important;
  height: var(--ctt-core-size-icon-m) !important;
}

.ctt-icon-l {
  width: var(--ctt-core-size-icon-l) !important;
  height: var(--ctt-core-size-icon-l) !important;
}

.ctt-icon-xl {
  width: var(--ctt-core-size-icon-xl) !important;
  height: var(--ctt-core-size-icon-xl) !important;
}

.ctt-icon-2xl {
  width: var(--ctt-core-size-icon-2xl) !important;
  height: var(--ctt-core-size-icon-2xl) !important;
}

.ctt-icon-3xl {
  width: var(--ctt-core-size-icon-3xl) !important;
  height: var(--ctt-core-size-icon-3xl) !important;
}

/* Control size utilities */
.ctt-control-xs {
  width: var(--ctt-core-size-control-xs) !important;
  height: var(--ctt-core-size-control-xs) !important;
}

.ctt-control-s {
  width: var(--ctt-core-size-control-s) !important;
  height: var(--ctt-core-size-control-s) !important;
}

.ctt-control-m {
  width: var(--ctt-core-size-control-m) !important;
  height: var(--ctt-core-size-control-m) !important;
}

.ctt-control-l {
  width: var(--ctt-core-size-control-l) !important;
  height: var(--ctt-core-size-control-l) !important;
}

.ctt-control-xl {
  width: var(--ctt-core-size-control-xl) !important;
  height: var(--ctt-core-size-control-xl) !important;
}

.ctt-control-2xl {
  width: var(--ctt-core-size-control-2xl) !important;
  height: var(--ctt-core-size-control-2xl) !important;
}

/* ==========================================================================
   ASPECT RATIO UTILITIES
   ========================================================================== */

.ctt-aspect-square {
  aspect-ratio: 1 / 1 !important;
}

.ctt-aspect-video {
  aspect-ratio: 16 / 9 !important;
}

.ctt-aspect-3-2 {
  aspect-ratio: 3 / 2 !important;
}

.ctt-aspect-4-3 {
  aspect-ratio: 4 / 3 !important;
}

.ctt-aspect-16-10 {
  aspect-ratio: 16 / 10 !important;
}

.ctt-aspect-auto {
  aspect-ratio: auto !important;
}

/* ==========================================================================
   TRANSITION AND ANIMATION UTILITIES
   ========================================================================== */

/* Transition timing */
.ctt-transition-none {
  transition: none !important;
}

.ctt-transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.ctt-transition-colors {
  transition-property: background-color, border-color, color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.ctt-transition-opacity {
  transition-property: opacity !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.ctt-transition-shadow {
  transition-property: box-shadow !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.ctt-transition-transform {
  transition-property: transform !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

/* Transition durations */
.ctt-duration-75 {
  transition-duration: 75ms !important;
}

.ctt-duration-100 {
  transition-duration: 100ms !important;
}

.ctt-duration-150 {
  transition-duration: 150ms !important;
}

.ctt-duration-200 {
  transition-duration: 200ms !important;
}

.ctt-duration-300 {
  transition-duration: 300ms !important;
}

.ctt-duration-500 {
  transition-duration: 500ms !important;
}

/* Transition timing functions */
.ctt-ease-linear {
  transition-timing-function: linear !important;
}

.ctt-ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
}

.ctt-ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
}

.ctt-ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transform utilities for animations */
.ctt-scale-0 {
  transform: scale(0) !important;
}

.ctt-scale-50 {
  transform: scale(0.5) !important;
}

.ctt-scale-75 {
  transform: scale(0.75) !important;
}

.ctt-scale-90 {
  transform: scale(0.9) !important;
}

.ctt-scale-95 {
  transform: scale(0.95) !important;
}

.ctt-scale-100 {
  transform: scale(1) !important;
}

.ctt-scale-110 {
  transform: scale(1.1) !important;
}

.ctt-translate-x-0 {
  transform: translateX(0) !important;
}

.ctt-translate-y-0 {
  transform: translateY(0) !important;
}

.ctt-translate-x-1 {
  transform: translateX(var(--ctt-core-space-1)) !important;
}

.ctt-translate-y-1 {
  transform: translateY(var(--ctt-core-space-1)) !important;
}

.ctt--translate-x-1 {
  transform: translateX(calc(-1 * var(--ctt-core-space-1))) !important;
}

.ctt--translate-y-1 {
  transform: translateY(calc(-1 * var(--ctt-core-space-1))) !important;
}

.ctt-rotate-0 {
  transform: rotate(0deg) !important;
}

.ctt-rotate-90 {
  transform: rotate(90deg) !important;
}

.ctt-rotate-180 {
  transform: rotate(180deg) !important;
}

.ctt--rotate-90 {
  transform: rotate(-90deg) !important;
}

/* ==========================================================================
   CURSOR AND POINTER UTILITIES
   ========================================================================== */

.ctt-cursor-auto {
  cursor: auto !important;
}

.ctt-cursor-default {
  cursor: default !important;
}

.ctt-cursor-pointer {
  cursor: pointer !important;
}

.ctt-cursor-wait {
  cursor: wait !important;
}

.ctt-cursor-text {
  cursor: text !important;
}

.ctt-cursor-move {
  cursor: move !important;
}

.ctt-cursor-help {
  cursor: help !important;
}

.ctt-cursor-not-allowed {
  cursor: not-allowed !important;
}

.ctt-cursor-grab {
  cursor: grab !important;
}

.ctt-cursor-grabbing {
  cursor: grabbing !important;
}

.ctt-pointer-events-none {
  pointer-events: none !important;
}

.ctt-pointer-events-auto {
  pointer-events: auto !important;
}

/* ==========================================================================
   USER SELECT UTILITIES
   ========================================================================== */

.ctt-select-none {
  user-select: none !important;
}

.ctt-select-text {
  user-select: text !important;
}

.ctt-select-all {
  user-select: all !important;
}

.ctt-select-auto {
  user-select: auto !important;
}

/* ==========================================================================
   Z-INDEX UTILITIES
   ========================================================================== */

.ctt-z-0 {
  z-index: 0 !important;
}

.ctt-z-10 {
  z-index: 10 !important;
}

.ctt-z-20 {
  z-index: 20 !important;
}

.ctt-z-30 {
  z-index: 30 !important;
}

.ctt-z-40 {
  z-index: 40 !important;
}

.ctt-z-50 {
  z-index: 50 !important;
}

.ctt-z-auto {
  z-index: auto !important;
}

/* Modal and overlay z-indexes (higher values) */
.ctt-z-modal {
  z-index: 1000 !important;
}

.ctt-z-dropdown {
  z-index: 1100 !important;
}

.ctt-z-sticky {
  z-index: 1020 !important;
}

.ctt-z-fixed {
  z-index: 1030 !important;
}

.ctt-z-popover {
  z-index: 1040 !important;
}

.ctt-z-tooltip {
  z-index: 1050 !important;
}

/* ==========================================================================
   VISIBILITY UTILITIES
   ========================================================================== */

.ctt-visible {
  visibility: visible !important;
}

.ctt-invisible {
  visibility: hidden !important;
}

/* Visually hidden but accessible to screen readers */
.ctt-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

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

.ctt-underline {
  text-decoration: underline !important;
}

.ctt-overline {
  text-decoration: overline !important;
}

.ctt-line-through {
  text-decoration: line-through !important;
}

.ctt-no-underline {
  text-decoration: none !important;
}

/* Text decoration color */
.ctt-decoration-error {
  text-decoration-color: var(--ctt-base-border-error) !important;
}

.ctt-decoration-primary {
  text-decoration-color: var(--ctt-base-border-primary) !important;
}

.ctt-decoration-success {
  text-decoration-color: var(--ctt-base-border-success) !important;
}

.ctt-decoration-warning {
  text-decoration-color: var(--ctt-base-border-warning) !important;
}

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

.ctt-uppercase {
  text-transform: uppercase !important;
}

.ctt-lowercase {
  text-transform: lowercase !important;
}

.ctt-capitalize {
  text-transform: capitalize !important;
}

.ctt-normal-case {
  text-transform: none !important;
}

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

.ctt-text-left {
  text-align: left !important;
}

.ctt-text-center {
  text-align: center !important;
}

.ctt-text-right {
  text-align: right !important;
}

.ctt-text-justify {
  text-align: justify !important;
}

/* ==========================================================================
   WORD BREAK AND OVERFLOW UTILITIES
   ========================================================================== */

.ctt-break-words {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.ctt-break-all {
  word-break: break-all !important;
}

.ctt-break-normal {
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.ctt-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ctt-line-clamp-1 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  overflow: hidden !important;
}

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

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

.ctt-line-clamp-none {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

.ctt-error-text {
  color: var(--ctt-error-text) !important;
  font-size: var(--ctt-error-text-font-size) !important;
  font-weight: var(--ctt-error-text-font-weight) !important;
  line-height: 1 !important;
}

.ctt-supporting-text {
  font-size: var(--ctt-error-text-font-size) !important;
  font-weight: var(--ctt-error-text-font-weight) !important;
}

/* ==========================================================================
   VERTICAL ALIGNMENT UTILITIES
   ========================================================================== */

.ctt-align-baseline {
  vertical-align: baseline !important;
}

.ctt-align-top {
  vertical-align: top !important;
}

.ctt-align-middle {
  vertical-align: middle !important;
}

.ctt-align-bottom {
  vertical-align: bottom !important;
}

.ctt-align-text-top {
  vertical-align: text-top !important;
}

.ctt-align-text-bottom {
  vertical-align: text-bottom !important;
}

.ctt-align-sub {
  vertical-align: sub !important;
}

.ctt-align-super {
  vertical-align: super !important;
}

/* ==========================================================================
   WHITESPACE UTILITIES
   ========================================================================== */

.ctt-whitespace-normal {
  white-space: normal !important;
}

.ctt-whitespace-nowrap {
  white-space: nowrap !important;
}

.ctt-whitespace-pre {
  white-space: pre !important;
}

.ctt-whitespace-pre-wrap {
  white-space: pre-wrap !important;
}

.ctt-whitespace-pre-line {
  white-space: pre-line !important;
}

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

.ctt-bg-fixed {
  background-attachment: fixed !important;
}

.ctt-bg-scroll {
  background-attachment: scroll !important;
}

.ctt-bg-clip-border {
  background-clip: border-box !important;
}

.ctt-bg-clip-padding {
  background-clip: padding-box !important;
}

.ctt-bg-clip-content {
  background-clip: content-box !important;
}

.ctt-bg-clip-text {
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

.ctt-bg-repeat {
  background-repeat: repeat !important;
}

.ctt-bg-no-repeat {
  background-repeat: no-repeat !important;
}

.ctt-bg-repeat-x {
  background-repeat: repeat-x !important;
}

.ctt-bg-repeat-y {
  background-repeat: repeat-y !important;
}

.ctt-bg-repeat-round {
  background-repeat: round !important;
}

.ctt-bg-repeat-space {
  background-repeat: space !important;
}

.ctt-bg-center {
  background-position: center !important;
}

.ctt-bg-left {
  background-position: left !important;
}

.ctt-bg-right {
  background-position: right !important;
}

.ctt-bg-top {
  background-position: top !important;
}

.ctt-bg-bottom {
  background-position: bottom !important;
}

.ctt-bg-cover {
  background-size: cover !important;
}

.ctt-bg-contain {
  background-size: contain !important;
}

/* ==========================================================================
   APPEARANCE AND STYLE UTILITIES
   ========================================================================== */

.ctt-appearance-none {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.ctt-resize-none {
  resize: none !important;
}

.ctt-resize-y {
  resize: vertical !important;
}

.ctt-resize-x {
  resize: horizontal !important;
}

.ctt-resize {
  resize: both !important;
}

/* ==========================================================================
   OUTLINE UTILITIES
   ========================================================================== */

.ctt-outline-none {
  outline: none !important;
}

.ctt-outline-1 {
  outline: 1px solid !important;
}

.ctt-outline-2 {
  outline: 2px solid !important;
}

.ctt-outline-primary {
  outline-color: var(--ctt-base-border-primary) !important;
}

.ctt-outline-error {
  outline-color: var(--ctt-base-border-error) !important;
}

.ctt-outline-success {
  outline-color: var(--ctt-base-border-success) !important;
}

/* ==========================================================================
   COMBINATION UTILITIES - COMMON PATTERNS
   ========================================================================== */

/* Center element absolutely */
.ctt-center-absolute {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Full screen overlay */
.ctt-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Aspect ratio container helper */
.ctt-aspect-container {
  position: relative !important;
  width: 100% !important;
}

.ctt-aspect-container>* {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Clearfix for floats */
.ctt-clearfix::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

/* Circle shape */
.ctt-rounded-circle {
  border-radius: 50% !important;
}

/* Disable text selection on hover (useful for interactive elements) */
.ctt-no-select {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Smooth scroll behavior */
.ctt-scroll-smooth {
  scroll-behavior: smooth !important;
}

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

@media print {
  .ctt-print-hidden {
    display: none !important;
  }

  .ctt-print-show {
    display: block !important;
  }

  .ctt-print-inline {
    display: inline !important;
  }

  .ctt-print-inline-block {
    display: inline-block !important;
  }
}

/* ==========================================================================
   RESPONSIVE PREFIXES
   ========================================================================== */

/* These utilities can be used with media query prefixes if needed */
/* Example: @media (max-width: 768px) { .ctt-sm\:hidden { display: none; } } */

/* Common breakpoints from tokens */
/* xs: 375px   - Small mobile */
/* sm: 481px   - Large mobile */
/* md: 769px   - Tablet */
/* lg: 1201px  - Large desktop */
/* xl: 1401px  - Extra large desktop */