/**
 * utilities.css
 * Minimal utility classes — layout, spacing, typography, color helpers.
 * No framework dependency.
 * 
 * This file provides single-purpose utility classes for:
 * - Display (flex, grid, block, hidden)
 * - Flexbox/Grid layout helpers
 * - Spacing (gap, padding, margin)
 * - Sizing (width, height, min/max)
 * - Overflow control
 * - Position (relative, absolute, sticky)
 * - Borders and border radius
 * - Background colors
 * - Text colors and typography
 * - Shadows and rings
 * - Cursor styles
 * - Opacity and transitions
 * - Hover variants
 * - Group hover effects
 * - Z-index
 * - Pointer events
 * - Transforms
 * - Responsive utilities (sm, md, lg, xl, 2xl breakpoints)
 */

@layer utilities {

/* ── Display ──
 * Control element visibility and display type
 */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.block       { display: block; }
.hidden      { display: none; }

/* ── Flex / Grid helpers ──
 * Flexbox direction, wrapping, alignment, and grid utilities
 */
.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1 1 0%; }
.flex-none      { flex: none; }
.shrink-0       { flex-shrink: 0; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-start   { justify-content: flex-start; }
.col-span-full  { grid-column: 1 / -1; }

/* ── Gap ──
 * Spacing between flex/grid children
 * Uses preset values from --gutter-* tokens
 */
.gap-xs   { gap: var(--gutter-xs); }   /* 4px */
.gap-sm   { gap: var(--gutter-sm); }   /* 8px */
.gap-md   { gap: var(--gutter-md); }   /* 16px */
.gap-lg   { gap: var(--gutter-lg); }   /* 24px */
.gap-xl   { gap: var(--gutter-xl); }   /* 32px */
.gap-2xl  { gap: var(--gutter-2xl); }  /* 48px */
.gap-3xl  { gap: var(--gutter-3xl); }  /* 64px */

/* ── Padding ──
 * Inner spacing utilities using --pad-* presets
 * p-* = all sides, px-* = inline (left/right), py-* = block (top/bottom)
 */
.p-xs   { padding: var(--pad-xs); }
.p-sm   { padding: var(--pad-sm); }
.p-md   { padding: var(--pad-md); }
.p-lg   { padding: var(--pad-lg); }
.p-xl   { padding: var(--pad-xl); }
.p-2xl  { padding: var(--pad-2xl); }
.p-3xl  { padding: var(--pad-3xl); }

.px-xs  { padding-inline: var(--pad-xs); }
.px-sm  { padding-inline: var(--pad-sm); }
.px-md  { padding-inline: var(--pad-md); }
.px-lg  { padding-inline: var(--pad-lg); }
.px-xl  { padding-inline: var(--pad-xl); }

.py-xs  { padding-block: var(--pad-xs); }
.py-sm  { padding-block: var(--pad-sm); }
.py-md  { padding-block: var(--pad-md); }
.py-lg  { padding-block: var(--pad-lg); }
.py-xl  { padding-block: var(--pad-xl); }

/* ── Margin ──
 * Outer spacing utilities using --marg-* presets
 * m-* = all sides, mt-* = top, mb-* = bottom, mr-* = right, ml-* = left
 */
.m-xs   { margin: var(--marg-xs); }
.m-sm   { margin: var(--marg-sm); }
.m-md   { margin: var(--marg-md); }
.m-lg   { margin: var(--marg-lg); }
.m-xl   { margin: var(--marg-xl); }
.m-2xl  { margin: var(--marg-2xl); }
.m-3xl  { margin: var(--marg-3xl); }

.mt-xs  { margin-top: var(--marg-xs); }
.mt-sm  { margin-top: var(--marg-sm); }
.mt-md  { margin-top: var(--marg-md); }
.mt-lg  { margin-top: var(--marg-lg); }
.mt-xl  { margin-top: var(--marg-xl); }

.mb-xs  { margin-bottom: var(--marg-xs); }
.mb-sm  { margin-bottom: var(--marg-sm); }
.mb-md  { margin-bottom: var(--marg-md); }
.mb-lg  { margin-bottom: var(--marg-lg); }
.mb-xl  { margin-bottom: var(--marg-xl); }

.mr-xs  { margin-right: var(--marg-xs); }
.mr-sm  { margin-right: var(--marg-sm); }
.mr-md  { margin-right: var(--marg-md); }
.mr-lg  { margin-right: var(--marg-lg); }
.mr-xl  { margin-right: var(--marg-xl); }

.ml-xs  { margin-left: var(--marg-xs); }
.ml-sm  { margin-left: var(--marg-sm); }
.ml-md  { margin-left: var(--marg-md); }
.ml-lg  { margin-left: var(--marg-lg); }
.ml-xl  { margin-left: var(--marg-xl); }
.ml-auto { margin-left: auto; } /* Push to right in flex row */

/* ── Size ──
 * Width, height, min/max constraints
 */
.w-3   { width: 0.75rem; }   /* 12px */
.w-4   { width: 1rem; }      /* 16px */
.w-5   { width: 1.25rem; }   /* 20px */
.w-6   { width: 1.5rem; }    /* 24px */
.w-8   { width: 2rem; }      /* 32px */
.w-16  { width: 4rem; }      /* 64px */
.w-20  { width: 5rem; }      /* 80px */
.w-24  { width: 6rem; }      /* 96px */
.w-32  { width: 8rem; }      /* 128px */
.w-full { width: 100%; }
.h-3   { height: 0.75rem; }
.h-4   { height: 1rem; }
.h-5   { height: 1.25rem; }
.h-6   { height: 1.5rem; }
.h-8   { height: 2rem; }
.h-24  { height: 6rem; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-\[100dvh\] { height: 100dvh; } /* Dynamic viewport height for mobile */
.min-h-0 { min-height: 0; }
.min-w-0 { min-width: 0; }
.max-w-full { max-width: 100%; }

/* ── Overflow ──
 * Content overflow control
 */
.overflow-auto   { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ── Position ──
 * Positioning context and offsets
 */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.top-0    { top: 0; }
.top-4    { top: 1rem; }
.inset-0  { inset: 0; } /* top, right, bottom, left */

/* ── Border ──
 * Border width, position, and radius
 */
.border      { border: var(--border-width) solid var(--color-border); }
.border-t    { border-top: var(--border-width) solid var(--color-border); }
.border-b    { border-bottom: var(--border-width) solid var(--color-border); }
.border-l    { border-left: var(--border-width) solid var(--color-border); }
.border-r    { border-right: var(--border-width) solid var(--color-border); }
.border-none { border: none; }
.rounded     { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); } /* Circle/pill */

/* ── Background ──
 * Semantic background utilities using design tokens.
 * Use these — NOT named-color helpers — to stay theme-aware.
 */
.bg-surface       { background-color: var(--color-surface); }
.bg-surface-alt   { background-color: var(--color-surface-alt); }
.bg-surface-raised { background-color: var(--color-surface-raised); }
.bg-surface-sunken { background-color: var(--color-surface-sunken); }
.bg-surface-hover { background-color: var(--color-surface-hover); }
.bg-primary       { background-color: var(--color-primary); }
.bg-primary-soft  { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.bg-success-soft  { background-color: color-mix(in srgb, var(--color-success) 10%, transparent); }
.bg-warning-soft  { background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.bg-critical-soft { background-color: color-mix(in srgb, var(--color-critical) 10%, transparent); }
.bg-transparent   { background-color: transparent; }

/* ── Text color ──
 * Semantic text color utilities tied to design tokens.
 */
.text          { color: var(--color-text); }
.text-muted    { color: var(--color-text-muted); }
.text-inverse  { color: var(--color-text-inverse); }
.text-primary  { color: var(--color-primary); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning-emphasis); }
.text-critical { color: var(--color-critical); }
.text-on-primary { color: var(--color-on-primary); }

/* ── Typography ──
 * Font size, weight, transform, spacing, and text utilities
 */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.font-mono   { font-family: var(--font-mono); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold   { font-weight: var(--font-bold); }
.uppercase   { text-transform: uppercase; }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.whitespace-nowrap { white-space: nowrap; }
.text-right  { text-align: right; }
.tabular-nums { font-variant-numeric: tabular-nums; } /* Monospace numbers for alignment */
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Shadow / Ring ──
 * Box shadows and focus ring utilities
 */
.shadow      { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.ring-1      { box-shadow: 0 0 0 1px var(--ring-color, var(--color-border)); }
.ring-blue-400 { --ring-color: color-mix(in srgb, var(--color-primary) 60%, transparent); }

/* ── Cursor ──
 * Mouse pointer styles
 */
.cursor-pointer { cursor: pointer; }
.cursor-grab    { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-not-allowed { cursor: not-allowed; }

/* ── Opacity / transition ──
 * Transparency and animation utilities
 */
.opacity-0   { opacity: 0; }
.opacity-80  { opacity: 0.8; }
.transition-colors { transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); }

/* ── Hover variants ──
 * Semantic hover utilities using design tokens
 */
.hover\:bg-surface-hover:hover { background-color: var(--color-surface-hover); }
.hover\:bg-surface-active:hover { background-color: var(--color-surface-active); }
.hover\:bg-primary:hover       { background-color: var(--color-primary); }
.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }
.hover\:bg-critical:hover      { background-color: var(--color-critical); }
.hover\:text-primary:hover     { color: var(--color-primary); }
.hover\:text-critical:hover    { color: var(--color-critical); }

/* ── Group hover ──
 * Child element visibility when parent is hovered
 * Usage: <div class="group"><span class="group-hover:flex">Show on hover</span></div>
 */
.group:hover .group-hover\:flex { display: flex; }
.group-hover\:flex { display: none; }

/* ── Z-index ──
 * Stacking order (use design tokens --z-* for semantic values)
 */
.z-10  { z-index: 10; }
.z-50  { z-index: 50; }

/* ── Pointer events ──
 * Click interaction control
 */
.pointer-events-none { pointer-events: none; } /* Not clickable */
.pointer-events-auto { pointer-events: auto; }

/* ── Transform ──
 * Position transforms for centering and adjustments
 */
.-translate-x-1\/2       { transform: translateX(-50%); } /* Center horizontally */
.-translate-x-\[3px\]   { transform: translateX(-3px); }

/* ── Size additions ──
 * Additional width/height utilities
 */
.w-2   { width: 0.5rem; }
.w-px  { width: 1px; }
.w-10  { width: 2.5rem; }
.w-36  { width: 9rem; }
.h-2   { height: 0.5rem; }
.h-12  { height: 3rem; }
.max-h-60  { max-height: 15rem; }
.max-w-2xl { max-width: 42rem; }

/* ── Position additions ──
 * Additional offset utilities
 */
.top-0\.5  { top: 0.125rem; }
.top-2     { top: 0.5rem; }
.right-0   { right: 0; }
.right-0\.5 { right: 0.125rem; }
.left-0    { left: 0; }
.bottom-0  { bottom: 0; }

/* ── Padding additions ──
 * Additional padding utilities
 */
.px-4  { padding-inline: 1rem; }
.pl-4  { padding-left: 1rem; }
.pl-5  { padding-left: 1.25rem; }

/* ── Margin additions ──
 * Additional margin utilities
 */
.mt-2  { margin-top: 0.5rem; }
.mr-2  { margin-right: 0.5rem; }
.mb-4  { margin-bottom: 1rem; }

/* ── Typography additions ──
 * Additional text utilities
 */
.text-center  { text-align: center; }
.font-normal  { font-weight: 400; }
.text-\[9px\] { font-size: 9px; }

/* ── Border additions ──
 * Additional border utilities
 */
.rounded-sm    { border-radius: var(--radius-xs, 2px); }
.border-strong { border-color: var(--color-border-strong); }

/* ── List ──
 * List style utilities
 */
.list-disc { list-style-type: disc; }

/* ── Spacing (space-y via gap on flex col) ──
 * Vertical space between siblings
 */
.space-y-2 > * + * { margin-top: 0.5rem; }

/* ── Responsive Utilities ──
 * Breakpoint-prefixed utilities for responsive design
 * Usage: class="hidden sm:flex md:grid"
 */

/* sm: 640px (small devices - landscape phones) */
@media (min-width: 640px) {
	.sm\:flex { display: flex; }
	.sm\:grid { display: grid; }
	.sm\:hidden { display: none; }
	.sm\:flex-col { flex-direction: column; }
	.sm\:flex-row { flex-direction: row; }
	.sm\:items-center { align-items: center; }
	.sm\:justify-center { justify-content: center; }
	.sm\:gap-2 { gap: 0.5rem; }
	.sm\:gap-4 { gap: 1rem; }
	.sm\:p-4 { padding: 1rem; }
	.sm\:text-left { text-align: left; }
	.sm\:text-center { text-align: center; }
}

/* md: 768px (medium devices - tablets) */
@media (min-width: 768px) {
	.md\:flex { display: flex; }
	.md\:grid { display: grid; }
	.md\:hidden { display: none; }
	.md\:flex-col { flex-direction: column; }
	.md\:flex-row { flex-direction: row; }
	.md\:items-center { align-items: center; }
	.md\:justify-between { justify-content: space-between; }
	.md\:gap-4 { gap: 1rem; }
	.md\:gap-6 { gap: 1.5rem; }
	.md\:p-6 { padding: 1.5rem; }
	.md\:text-left { text-align: left; }
	.md\:text-center { text-align: center; }
	.md\:text-base { font-size: var(--text-base); }
	.md\:text-lg { font-size: var(--text-lg); }
}

/* lg: 1024px (large devices - laptops) */
@media (min-width: 1024px) {
	.lg\:flex { display: flex; }
	.lg\:grid { display: grid; }
	.lg\:hidden { display: none; }
	.lg\:flex-col { flex-direction: column; }
	.lg\:flex-row { flex-direction: row; }
	.lg\:items-center { align-items: center; }
	.lg\:justify-between { justify-content: space-between; }
	.lg\:gap-6 { gap: 1.5rem; }
	.lg\:p-8 { padding: 2rem; }
	.lg\:text-left { text-align: left; }
	.lg\:text-center { text-align: center; }
	.lg\:text-lg { font-size: var(--text-lg); }
	.lg\:text-xl { font-size: var(--text-xl); }
}

/* xl: 1280px (extra large - desktops) */
@media (min-width: 1280px) {
	.xl\:flex { display: flex; }
	.xl\:grid { display: grid; }
	.xl\:hidden { display: none; }
	.xl\:flex-row { flex-direction: row; }
	.xl\:gap-8 { gap: 2rem; }
	.xl\:p-12 { padding: 3rem; }
}

/* 2xl: 1536px (2XL - large desktops) */
@media (min-width: 1536px) {
	.\32xl\:flex { display: flex; }
	.\32xl\:grid { display: grid; }
	.\32xl\:hidden { display: none; }
	.\32xl\:gap-12 { gap: 3rem; }
}

} /* @layer utilities */