/* ============================================================
   HEXADIO DIGITAL — UTILITY CLASSES
   ============================================================ */

/* Display */
.d-none   { display: none; }
.d-block  { display: block; }
.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Width / Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }

/* Padding helpers */
.p-sm  { padding: var(--space-sm); }
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }

/* Background */
.bg-white    { background: var(--color-white); }
.bg-bg       { background: var(--color-bg); }
.bg-accent   { background: var(--color-accent); }
.bg-subtle   { background: rgba(46,79,109,0.03); }

/* Border */
.border      { border: 1px solid var(--color-border); }
.border-top  { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.rounded     { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Font weights */
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Font family */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

/* Font sizes */
.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }

/* Alignment */
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Flex misc */
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Gap */
.gap-xs   { gap: var(--space-xs); }
.gap-sm   { gap: var(--space-sm); }
.gap-md   { gap: var(--space-md); }
.gap-lg   { gap: var(--space-lg); }
.gap-xl   { gap: var(--space-xl); }

/* Margin auto */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Letter spacing */
.tracking-wide     { letter-spacing: 0.05em; }
.tracking-wider    { letter-spacing: 0.1em; }
.tracking-widest   { letter-spacing: 0.2em; }
.uppercase         { text-transform: uppercase; }

/* Line height */
.leading-tight  { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.75; }

/* Max widths */
.max-w-text  { max-width: var(--max-width-text); }
.max-w-full  { max-width: var(--max-width); }
.max-w-sm    { max-width: 480px; }
.max-w-md    { max-width: 640px; }

/* Transitions */
.transition { transition: all var(--transition-fast); }

/* Section backgrounds */
.section-white   { background: var(--color-white); }
.section-bg      { background: var(--color-bg); }
.section-accent  { background: var(--gradient-accent); }
.section-subtle  { background: rgba(46,79,109,0.02); }

/* Responsive utilities */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}