// Helper utilities

/**
 * @section Display
 */

/** @public Block display */
.block { display: block; }

/** @public Inline-block display */
.inline-block { display: inline-block; }

/** @public Inline display */
.inline { display: inline; }

/** @public Hide element (display: none) */
.hidden { display: none; }

/** @public Invisible (visibility: hidden) */
.invisible { visibility: hidden; }

/** @public Vanish - hide with both display and visibility */
.vanish { display: none !important; visibility: hidden !important; }

/**
 * @section Position
 */

/** @public Relative positioning */
.relative { position: relative; }

/** @public Absolute positioning */
.absolute { position: absolute; }

/** @public Fixed positioning */
.fixed { position: fixed; }

/** @public Sticky positioning */
.sticky { position: sticky; }

/**
 * @section Size
 */

/** @public Full width (100%) */
.full-width { width: 100%; }

/** @public Full height (100%) */
.full-height { height: 100%; }

/** @public Full viewport height */
.full-viewport-height { height: 100vh; }

/** @public Full viewport width */
.full-viewport-width { width: 100vw; }

/** @public Max full width */
.max-full-width { max-width: 100%; }

/** @public Min full height */
.min-full-height { min-height: 100%; }

// Bare v1 compatible sizing
/** @public Full width - v1 compat */
.full-x { width: 100%; }

/** @public Full height - v1 compat */
.full-y { height: 100%; }

/** @public Full width and height - v1 compat */
.full { width: 100%; height: 100%; }

/**
 * @section Overflow
 */

/** @public Auto overflow */
.overflow-auto { overflow: auto; }

/** @public Hidden overflow */
.overflow-hidden { overflow: hidden; }

/** @public Visible overflow */
.overflow-visible { overflow: visible; }

/** @public Scroll overflow */
.overflow-scroll { overflow: scroll; }

/**
 * @section Cursor
 */

/** @public Pointer cursor */
.cursor-pointer { cursor: pointer; }

/** @public Default cursor */
.cursor-default { cursor: default; }

/** @public Not-allowed cursor */
.cursor-not-allowed { cursor: not-allowed; }

/**
 * @section User Select
 */

/** @public Disable text selection */
.select-none { user-select: none; }

/** @public Enable text selection */
.select-text { user-select: text; }

/** @public Select all text */
.select-all { user-select: all; }

/**
 * @section Pointer Events
 */

/** @public Disable pointer events */
.pointer-events-none { pointer-events: none; }

/** @public Enable pointer events */
.pointer-events-auto { pointer-events: auto; }

/**
 * @section Z-Index
 */

/** @public Z-index 0 */
.z-0 { z-index: 0; }

/** @public Z-index 10 */
.z-10 { z-index: 10; }

/** @public Z-index 20 */
.z-20 { z-index: 20; }

/** @public Z-index 30 */
.z-30 { z-index: 30; }

/** @public Z-index 40 */
.z-40 { z-index: 40; }

/** @public Z-index 50 */
.z-50 { z-index: 50; }

/**
 * @section Borders
 */

/** @public 1px border all sides */
.border { border: 1px solid hsl(var(--border)); }

/** @public Top border */
.border-t { border-top: 1px solid hsl(var(--border)); }

/** @public Right border */
.border-r { border-right: 1px solid hsl(var(--border)); }

/** @public Bottom border */
.border-b { border-bottom: 1px solid hsl(var(--border)); }

/** @public Left border */
.border-l { border-left: 1px solid hsl(var(--border)); }

/** @public Horizontal borders */
.border-x { border-left: 1px solid hsl(var(--border)); border-right: 1px solid hsl(var(--border)); }

/** @public Vertical borders */
.border-y { border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }

/** @public No border */
.border-none { border: none; }

/** @public 0px border */
.border-0 { border: 0 solid hsl(var(--border)); }

/** @public 2px border */
.border-2 { border: 2px solid hsl(var(--border)); }

/** @public 4px border */
.border-4 { border: 4px solid hsl(var(--border)); }

/** @public 8px border */
.border-8 { border: 8px solid hsl(var(--border)); }

/** @public Solid border style */
.border-solid { border-style: solid; }

/** @public Dashed border style */
.border-dashed { border-style: dashed; }

/** @public Dotted border style */
.border-dotted { border-style: dotted; }

/** @public Double border style */
.border-double { border-style: double; }

/** @public Dashed border shortcut */
.dash {
  border: 1px dashed hsl(var(--border));
}

/** @public Dotted border shortcut */
.dotted {
  border: 1px dotted hsl(var(--border));
}

/** @public Medium border radius */
.rounded { border-radius: var(--radius-md); }

/** @public Small border radius */
.rounded-sm { border-radius: var(--radius-sm); }

/** @public Large border radius */
.rounded-lg { border-radius: var(--radius-lg); }

/** @public Extra large border radius */
.rounded-xl { border-radius: var(--radius-xl); }

/** @public 2XL border radius */
.rounded-2xl { border-radius: var(--radius-2xl); }

/** @public Full/circle border radius */
.rounded-full { border-radius: var(--radius-full); }

/** @public No border radius */
.rounded-none { border-radius: 0; }

/** @public Rounded top */
.rounded-t { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }

/** @public Rounded right */
.rounded-r { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

/** @public Rounded bottom */
.rounded-b { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

/** @public Rounded left */
.rounded-l { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }

/** @public Rounded top-left corner */
.rounded-tl { border-top-left-radius: var(--radius-md); }

/** @public Rounded top-right corner */
.rounded-tr { border-top-right-radius: var(--radius-md); }

/** @public Rounded bottom-right corner */
.rounded-br { border-bottom-right-radius: var(--radius-md); }

/** @public Rounded bottom-left corner */
.rounded-bl { border-bottom-left-radius: var(--radius-md); }

/**
 * @section Aspect Ratio
 */

/** @public Square aspect ratio (1:1) */
.aspect-square { aspect-ratio: 1 / 1; }

/** @public Video aspect ratio (16:9) */
.aspect-video { aspect-ratio: 16 / 9; }

/**
 * @section Dividers
 */

/** @public Horizontal divider */
.divider {
  height: 1px;
  background-color: hsl(var(--border));
  margin: var(--spacing-4) 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  
  // Divider with text
  &:has(span) {
    &::before,
    &::after {
      content: '';
      flex: 1;
      height: 1px;
      background-color: hsl(var(--border));
    }
    
    span {
      padding: 0 var(--spacing-3);
      font-size: var(--text-sm);
      color: hsl(var(--muted-foreground));
      background-color: hsl(var(--card));
      white-space: nowrap;
    }
  }
}

/** @public Vertical divider */
.divider-vertical {
  width: 1px;
  height: 100%;
  background-color: hsl(var(--border));
  margin: 0 var(--spacing-4);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  // Divider with text
  &:has(span) {
    &::before,
    &::after {
      content: '';
      flex: 1;
      width: 1px;
      background-color: hsl(var(--border));
    }
    
    span {
      padding: var(--spacing-2) 0;
      font-size: var(--text-xs);
      color: hsl(var(--muted-foreground));
      background-color: hsl(var(--card));
      white-space: nowrap;
    }
  }
  
  // Rotated text variant
  &.divider-vertical-text {
    span {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      padding: var(--spacing-3);
      font-size: var(--text-sm);
    }
  }
}

/**
 * @section Effects
 */

/** @public Sunken surface effect */
.sunken-surface {
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.1),
    inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}

/* Dark mode override */
.dark .sunken-surface {
  background-color: #222222;
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(255, 255, 255, 0.1);
}

/** @public Surface separator - thin sunken divider */
.surface-separator {
  .sunken-surface;
  height:3px;
}

/** @public Full-screen overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 50;
}

/** @public Glassmorphism effect */
.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.dark .glass,
[data-theme="dark"] .glass {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/** @public Tooltip with data-tooltip attribute */
.tooltip {
  position: relative;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  
  &::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: hsl(var(--foreground));
    color: hsl(var(--background));
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  &::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: hsl(var(--foreground));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
  }
  
  &:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
  }
  
  &:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
  }
}

/**
 * @section Scroll
 */

/** @public Auto scroll with smooth scrolling */
.scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/** @public Horizontal scroll only */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/** @public Vertical scroll only */
.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/**
 * @section Layout Helpers
 */

/** @public Center with auto margin */
.centered {
  margin-left: auto;
  margin-right: auto;
}

/** @public Contents display mode */
.contents {
  display: contents;
}

/**
 * @section Text Utilities
 */

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

/** @public Clamp text to 1 line */
.text-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/** @public Clamp text to 2 lines */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/** @public Clamp text to 3 lines */
.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/** @public Clamp text to 4 lines */
.text-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/** @public Clamp text to 5 lines */
.text-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/** @public Clamp text to 6 lines */
.text-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// Flex utilities (v1 compatible)
/** @public Flex grow/shrink - v1 compat */
.flex { flex: 1 1 0%; }

/** @public Locked flex (no grow/shrink) - v1 compat */
.flex-locked { flex: 0 0 auto; }

/** @public Display flex - v1 compat */
.x-flex { display: flex; }

// Gap utility (v1 compatible - uses default gap)
/** @public Default gap - v1 compat */
.gap { gap: var(--gap-md); }

/**
 * @section Opacity
 */

/** @public Opacity 0 */
.opacity-0 { opacity: 0; }

/** @public Opacity 25% */
.opacity-25 { opacity: 0.25; }

/** @public Opacity 50% */
.opacity-50 { opacity: 0.5; }

/** @public Opacity 75% */
.opacity-75 { opacity: 0.75; }

/** @public Opacity 100% */
.opacity-100 { opacity: 1; }

/**
 * @section Background
 */

/** @public Transparent background */
.bg-transparent { background-color: transparent; }

/** @public Translucent surface background */
.bg-surface-translucent { background: hsl(var(--background) / 0.85); }

/** @public Subtle muted background */
.bg-muted-subtle { background: hsl(var(--muted) / 0.3); }

/** @public Left text alignment */
.text-left { text-align: left; }

/** @public Center text alignment */
.text-center { text-align: center; }

/** @public Right text alignment */
.text-right { text-align: right; }

/** @public Justify text alignment */
.text-justify { text-align: justify; }

/**
 * @section Text Transform
 */

/** @public Uppercase text */
.uppercase { text-transform: uppercase; }

/** @public Lowercase text */
.lowercase { text-transform: lowercase; }

/** @public Capitalize text */
.capitalize { text-transform: capitalize; }

/** @public Normal case (no transform) */
.normal-case { text-transform: none; }

/**
 * @section Letter Spacing
 */

/** @public Tighter tracking */
.tracking-tighter { letter-spacing: -0.025em; }

/** @public Tight tracking */
.tracking-tight { letter-spacing: -0.05em; }

/** @public Normal tracking */
.tracking-normal { letter-spacing: 0em; }

/** @public Wide tracking */
.tracking-wide { letter-spacing: 0.05em; }

/** @public Wider tracking */
.tracking-wider { letter-spacing: 0.1em; }

/** @public Widest tracking */
.tracking-widest { letter-spacing: 0.15em; }

/**
 * @section Font Style
 */

/** @public Italic font style */
.italic { font-style: italic; }

/** @public Not italic */
.not-italic { font-style: normal; }

/**
 * @section Text Decoration
 */

/** @public Underline text */
.underline { text-decoration: underline; }

/** @public Line-through text */
.line-through { text-decoration: line-through; }

/** @public No underline */
.no-underline { text-decoration: none; }

/**
 * @section Whitespace
 */

/** @public Normal whitespace */
.whitespace-normal { white-space: normal; }

/** @public No-wrap whitespace */
.whitespace-nowrap { white-space: nowrap; }

/** @public Pre whitespace */
.whitespace-pre { white-space: pre; }

/** @public Pre-wrap whitespace */
.whitespace-pre-wrap { white-space: pre-wrap; }

/**
 * @section List Style
 */

/** @public No list style */
.list-none { list-style-type: none; }

/** @public Disc list style */
.list-disc { list-style-type: disc; }

/** @public Decimal list style */
.list-decimal { list-style-type: decimal; }

/**
 * @section Object Fit
 */

/** @public Object fit contain */
.object-contain { object-fit: contain; }

/** @public Object fit cover */
.object-cover { object-fit: cover; }

/** @public Object fit fill */
.object-fill { object-fit: fill; }

/** @public Object fit none */
.object-none { object-fit: none; }

/** @public Object fit scale-down */
.object-scale-down { object-fit: scale-down; }

/**
 * @section Object Position
 */

/** @public Object position center */
.object-center { object-position: center; }

/** @public Object position top */
.object-top { object-position: top; }

/** @public Object position bottom */
.object-bottom { object-position: bottom; }

/** @public Object position left */
.object-left { object-position: left; }

/** @public Object position right */
.object-right { object-position: right; }

/**
 * @section Transform Origin
 */

/** @public Transform origin center */
.origin-center { transform-origin: center; }

/** @public Transform origin top */
.origin-top { transform-origin: top; }

/** @public Transform origin bottom */
.origin-bottom { transform-origin: bottom; }

/** @public Transform origin left */
.origin-left { transform-origin: left; }

/** @public Transform origin right */
.origin-right { transform-origin: right; }

/**
 * @section Scale
 */

/** @public Scale to 0 */
.scale-0 { transform: scale(0); }

/** @public Scale to 50% */
.scale-50 { transform: scale(0.5); }

/** @public Scale to 75% */
.scale-75 { transform: scale(0.75); }

/** @public Scale to 90% */
.scale-90 { transform: scale(0.9); }

/** @public Scale to 95% */
.scale-95 { transform: scale(0.95); }

/** @public Scale to 100% */
.scale-100 { transform: scale(1); }

/** @public Scale to 105% */
.scale-105 { transform: scale(1.05); }

/** @public Scale to 110% */
.scale-110 { transform: scale(1.1); }

/** @public Scale to 125% */
.scale-125 { transform: scale(1.25); }

/** @public Scale to 150% */
.scale-150 { transform: scale(1.5); }

/**
 * @section Rotate
 */

/** @public Rotate 0 degrees */
.rotate-0 { transform: rotate(0deg); }

/** @public Rotate 45 degrees */
.rotate-45 { transform: rotate(45deg); }

/** @public Rotate 90 degrees */
.rotate-90 { transform: rotate(90deg); }

/** @public Rotate 180 degrees */
.rotate-180 { transform: rotate(180deg); }

/** @public Rotate 270 degrees */
.rotate-270 { transform: rotate(270deg); }

/** @public Rotate -45 degrees */
.-rotate-45 { transform: rotate(-45deg); }

/** @public Rotate -90 degrees */
.-rotate-90 { transform: rotate(-90deg); }

/** @public Rotate -180 degrees */
.-rotate-180 { transform: rotate(-180deg); }

/**
 * @section Ring & Outline
 */

/** @public Ring (focus ring) */
.ring { box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5); }

/** @public Inset ring */
.ring-inset { box-shadow: inset 0 0 0 3px hsl(var(--ring) / 0.5); }

/** @public No ring */
.ring-none { box-shadow: none; }

/** @public No outline */
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }

/** @public Outline */
.outline { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/** @public Dashed outline */
.outline-dashed { outline: 2px dashed hsl(var(--ring)); outline-offset: 2px; }

/** @public Inner shadow */
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.06); }

/**
 * @section Image & Media
 */

/** @public Crisp image rendering */
.image-crisp { image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast; }

/** @public Auto image rendering */
.image-auto { image-rendering: auto; }

/**
 * @section Mix Blend Mode
 */

/** @public Normal blend mode */
.mix-blend-normal { mix-blend-mode: normal; }

/** @public Multiply blend mode */
.mix-blend-multiply { mix-blend-mode: multiply; }

/** @public Screen blend mode */
.mix-blend-screen { mix-blend-mode: screen; }

/** @public Overlay blend mode */
.mix-blend-overlay { mix-blend-mode: overlay; }

/**
 * @section Backdrop Filter
 */

/** @public Small backdrop blur */
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/** @public Medium backdrop blur */
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/** @public Large backdrop blur (12px) */
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/** @public Extra large backdrop blur (16px) */
.backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/** @public 2XL backdrop blur (24px) */
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/** @public No backdrop blur */
.backdrop-blur-none { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }

/**
 * @section Vertical Alignment
 */

/** @public Baseline vertical alignment */
.align-baseline { vertical-align: baseline; }

/** @public Top vertical alignment */
.align-top { vertical-align: top; }

/** @public Middle vertical alignment */
.align-middle { vertical-align: middle; }

/** @public Bottom vertical alignment */
.align-bottom { vertical-align: bottom; }

/** @public Text-top vertical alignment */
.align-text-top { vertical-align: text-top; }

/** @public Text-bottom vertical alignment */
.align-text-bottom { vertical-align: text-bottom; }

/**
 * @section Word Break
 */

/** @public Normal break behavior */
.break-normal { overflow-wrap: normal; word-break: normal; }

/** @public Break words */
.break-words { overflow-wrap: break-word; }

/** @public Break all */
.break-all { word-break: break-all; }

/**
 * @section Resize
 */

/** @public No resize */
.resize-none { resize: none; }

/** @public Both resize */
.resize { resize: both; }

/** @public Horizontal resize */
.resize-x { resize: horizontal; }

/** @public Vertical resize */
.resize-y { resize: vertical; }

/**
 * @section Touch Action
 */

/** @public Auto touch action */
.touch-auto { touch-action: auto; }

/** @public No touch action */
.touch-none { touch-action: none; }

/** @public Pan-x touch action */
.touch-pan-x { touch-action: pan-x; }

/** @public Pan-y touch action */
.touch-pan-y { touch-action: pan-y; }

/**
 * @section Performance
 */

/** @public Auto will-change */
.will-change-auto { will-change: auto; }

/** @public Will-change scroll */
.will-change-scroll { will-change: scroll-position; }

/** @public Will-change contents */
.will-change-contents { will-change: contents; }

/** @public Will-change transform */
.will-change-transform { will-change: transform; }

/**
 * @section UI Components
 */

/** @public Section label - uppercase small heading */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: var(--leading-tight);
}

/** @public Dotted grid background */
.bg-dotted {
  background-image: radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: 0 0;
}

/** @public Demo dish - presentation wrapper */
.demo-dish {
  padding: var(--spacing-6);
  margin-top: var(--spacing-3);
  border: 2px dashed hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--muted) / 0.2);
  position: relative;
  .bg-dotted;
}

.demo-dish::before {
  content: 'Demo';
  position: absolute;
  top: calc(-1 * var(--spacing-2));
  left: var(--spacing-4);
  background: hsl(var(--background));
  padding: 0 var(--spacing-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/** @public Compact demo dish */
.demo-dish-compact {
  padding: var(--spacing-4);
}

/** @public Spacious demo dish */
.demo-dish-spacious {
  padding: var(--spacing-8);
}