/* ============================================
   HACK THE SYSTEM - Utility CSS
   Helper Classes for Common Patterns
   ============================================ */

/* ============================================
   DISPLAY UTILITIES
   ============================================ */

.d--block { display: block; }
.d--inline { display: inline; }
.d--inline-block { display: inline-block; }
.d--flex { display: flex; }
.d--inline-flex { display: inline-flex; }
.d--grid { display: grid; }
.d--hidden { display: none; }

@media (max-width: 767px) {
  .d--none-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .d--none-tablet { display: none !important; }
}

@media (min-width: 1024px) {
  .d--none-desktop { display: none !important; }
}

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

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

.pos--t-0 { top: 0; }
.pos--r-0 { right: 0; }
.pos--b-0 { bottom: 0; }
.pos--l-0 { left: 0; }

/* ============================================
   FLEX DIRECTION UTILITIES
   ============================================ */

.flex--row { flex-direction: row; }
.flex--row-reverse { flex-direction: row-reverse; }
.flex--col { flex-direction: column; }
.flex--col-reverse { flex-direction: column-reverse; }

/* ============================================
   FLEX WRAP UTILITIES
   ============================================ */

.flex--wrap { flex-wrap: wrap; }
.flex--nowrap { flex-wrap: nowrap; }

/* ============================================
   FLEX JUSTIFY UTILITIES
   ============================================ */

.justify--start { justify-content: flex-start; }
.justify--center { justify-content: center; }
.justify--end { justify-content: flex-end; }
.justify--between { justify-content: space-between; }
.justify--around { justify-content: space-around; }
.justify--evenly { justify-content: space-evenly; }

/* ============================================
   FLEX ALIGN UTILITIES
   ============================================ */

.items--start { align-items: flex-start; }
.items--center { align-items: center; }
.items--end { align-items: flex-end; }
.items--stretch { align-items: stretch; }
.items--baseline { align-items: baseline; }

/* ============================================
   ALIGN SELF UTILITIES
   ============================================ */

.self--start { align-self: flex-start; }
.self--center { align-self: center; }
.self--end { align-self: flex-end; }
.self--stretch { align-self: stretch; }

/* ============================================
   FLEX GROW UTILITIES
   ============================================ */

.flex--grow { flex-grow: 1; }
.flex--grow-0 { flex-grow: 0; }
.flex--shrink { flex-shrink: 1; }
.flex--shrink-0 { flex-shrink: 0; }

/* ============================================
   WIDTH UTILITIES
   ============================================ */

.w--auto { width: auto; }
.w--full { width: 100%; }
.w--screen { width: 100vw; }
.w--1-2 { width: 50%; }
.w--1-3 { width: 33.333333%; }
.w--2-3 { width: 66.666667%; }
.w--1-4 { width: 25%; }
.w--3-4 { width: 75%; }

.max-w--none { max-width: none; }
.max-w--xs { max-width: 20rem; }
.max-w--sm { max-width: 24rem; }
.max-w--md { max-width: 28rem; }
.max-w--lg { max-width: 32rem; }
.max-w--xl { max-width: 36rem; }
.max-w--2xl { max-width: 42rem; }
.max-w--3xl { max-width: 48rem; }
.max-w--4xl { max-width: 56rem; }
.max-w--5xl { max-width: 64rem; }
.max-w--6xl { max-width: 72rem; }
.max-w--7xl { max-width: 80rem; }
.max-w--full { max-width: 100%; }
.max-w--screen { max-width: 100vw; }

.min-w--0 { min-width: 0; }
.min-w--full { min-width: 100%; }

/* ============================================
   HEIGHT UTILITIES
   ============================================ */

.h--auto { height: auto; }
.h--full { height: 100%; }
.h--screen { height: 100vh; }
.h--0 { height: 0; }

.min-h--0 { min-height: 0; }
.min-h--full { min-height: 100%; }
.min-h--screen { min-height: 100vh; }

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

.overflow--auto { overflow: auto; }
.overflow--hidden { overflow: hidden; }
.overflow--visible { overflow: visible; }
.overflow--scroll { overflow: scroll; }

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

/* ============================================
   GAP UTILITIES
   ============================================ */

.gap--0 { gap: 0; }
.gap--xs { gap: var(--spacing-xs); }
.gap--sm { gap: var(--spacing-sm); }
.gap--md { gap: var(--spacing-md); }
.gap--lg { gap: var(--spacing-lg); }
.gap--xl { gap: var(--spacing-xl); }
.gap--2xl { gap: var(--spacing-2xl); }
.gap--3xl { gap: var(--spacing-3xl); }

/* ============================================
   MARGIN UTILITIES
   ============================================ */

.m--0 { margin: 0; }
.m--auto { margin: auto; }

.mx--auto { margin-left: auto; margin-right: auto; }
.my--auto { margin-top: auto; margin-bottom: auto; }

/* Margin X */
.mx--0 { margin-left: 0; margin-right: 0; }
.mx--sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx--md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx--lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx--xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }
.mx--2xl { margin-left: var(--spacing-2xl); margin-right: var(--spacing-2xl); }

/* Margin Y */
.my--0 { margin-top: 0; margin-bottom: 0; }
.my--sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my--md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my--lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my--xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
.my--2xl { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); }

/* Margin Left */
.ml--0 { margin-left: 0; }
.ml--auto { margin-left: auto; }
.ml--sm { margin-left: var(--spacing-sm); }
.ml--md { margin-left: var(--spacing-md); }
.ml--lg { margin-left: var(--spacing-lg); }
.ml--xl { margin-left: var(--spacing-xl); }
.ml--2xl { margin-left: var(--spacing-2xl); }

/* Margin Right */
.mr--0 { margin-right: 0; }
.mr--auto { margin-right: auto; }
.mr--sm { margin-right: var(--spacing-sm); }
.mr--md { margin-right: var(--spacing-md); }
.mr--lg { margin-right: var(--spacing-lg); }
.mr--xl { margin-right: var(--spacing-xl); }
.mr--2xl { margin-right: var(--spacing-2xl); }

/* Negative Margin */
.-mt--sm { margin-top: calc(var(--spacing-sm) * -1); }
.-mt--md { margin-top: calc(var(--spacing-md) * -1); }
.-mt--lg { margin-top: calc(var(--spacing-lg) * -1); }

.-mb--sm { margin-bottom: calc(var(--spacing-sm) * -1); }
.-mb--md { margin-bottom: calc(var(--spacing-md) * -1); }
.-mb--lg { margin-bottom: calc(var(--spacing-lg) * -1); }

/* ============================================
   PADDING UTILITIES
   ============================================ */

.p--0 { padding: 0; }
.p--sm { padding: var(--spacing-sm); }
.p--md { padding: var(--spacing-md); }
.p--lg { padding: var(--spacing-lg); }
.p--xl { padding: var(--spacing-xl); }
.p--2xl { padding: var(--spacing-2xl); }
.p--3xl { padding: var(--spacing-3xl); }

/* Padding X */
.px--0 { padding-left: 0; padding-right: 0; }
.px--sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px--md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px--lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px--xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.px--2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }

/* Padding Y */
.py--0 { padding-top: 0; padding-bottom: 0; }
.py--sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py--md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py--lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py--xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py--2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.py--3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }

/* Padding Top */
.pt--0 { padding-top: 0; }
.pt--sm { padding-top: var(--spacing-sm); }
.pt--md { padding-top: var(--spacing-md); }
.pt--lg { padding-top: var(--spacing-lg); }
.pt--xl { padding-top: var(--spacing-xl); }
.pt--2xl { padding-top: var(--spacing-2xl); }
.pt--3xl { padding-top: var(--spacing-3xl); }
.pt--4xl { padding-top: var(--spacing-4xl); }
.pt--5xl { padding-top: var(--spacing-5xl); }
.pt--6xl { padding-top: var(--spacing-6xl); }

/* Padding Bottom */
.pb--0 { padding-bottom: 0; }
.pb--sm { padding-bottom: var(--spacing-sm); }
.pb--md { padding-bottom: var(--spacing-md); }
.pb--lg { padding-bottom: var(--spacing-lg); }
.pb--xl { padding-bottom: var(--spacing-xl); }
.pb--2xl { padding-bottom: var(--spacing-2xl); }
.pb--3xl { padding-bottom: var(--spacing-3xl); }
.pb--4xl { padding-bottom: var(--spacing-4xl); }
.pb--5xl { padding-bottom: var(--spacing-5xl); }
.pb--6xl { padding-bottom: var(--spacing-6xl); }

/* Padding Left */
.pl--0 { padding-left: 0; }
.pl--sm { padding-left: var(--spacing-sm); }
.pl--md { padding-left: var(--spacing-md); }
.pl--lg { padding-left: var(--spacing-lg); }
.pl--xl { padding-left: var(--spacing-xl); }
.pl--2xl { padding-left: var(--spacing-2xl); }

/* Padding Right */
.pr--0 { padding-right: 0; }
.pr--sm { padding-right: var(--spacing-sm); }
.pr--md { padding-right: var(--spacing-md); }
.pr--lg { padding-right: var(--spacing-lg); }
.pr--xl { padding-right: var(--spacing-xl); }
.pr--2xl { padding-right: var(--spacing-2xl); }

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

.text--left { text-align: left; }
.text--center { text-align: center; }
.text--right { text-align: right; }
.text--justify { text-align: justify; }

.text--uppercase { text-transform: uppercase; }
.text--lowercase { text-transform: lowercase; }
.text--capitalize { text-transform: capitalize; }

.text--wrap { white-space: normal; }
.text--nowrap { white-space: nowrap; }
.text--break-words { word-wrap: break-word; }
.text--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text--leading-none { line-height: 1; }
.text--leading-tight { line-height: 1.25; }
.text--leading-normal { line-height: 1.5; }
.text--leading-loose { line-height: 2; }

.text--tracking-tighter { letter-spacing: -0.05em; }
.text--tracking-tight { letter-spacing: -0.025em; }
.text--tracking-normal { letter-spacing: 0; }
.text--tracking-wide { letter-spacing: 0.025em; }
.text--tracking-wider { letter-spacing: 0.05em; }
.text--tracking-widest { letter-spacing: 0.1em; }

/* Text Colors */
.text--primary { color: var(--color-primary); }
.text--secondary { color: var(--color-secondary); }
.text--accent { color: var(--color-accent); }
.text--success { color: var(--color-success); }
.text--warning { color: var(--color-warning); }
.text--error { color: var(--color-error); }
.text--white { color: var(--color-white); }
.text--gray { color: var(--color-text-light); }

/* Theme-aware text colors for sections that don't adapt */
.text--theme-aware {
  color: var(--color-text);
}

[data-theme="light"] .section--dark .text--theme-aware,
[data-theme="light"] .hero .text--theme-aware {
  color: var(--color-white);
}

[data-theme="dark"] .section--dark .text--theme-aware,
[data-theme="dark"] .hero .text--theme-aware {
  color: var(--color-white);
}

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

/* Font Weights */
.font--thin { font-weight: 100; }
.font--extralight { font-weight: 200; }
.font--light { font-weight: 300; }
.font--normal { font-weight: 400; }
.font--medium { font-weight: 500; }
.font--semi { font-weight: 600; }
.font--bold { font-weight: 700; }
.font--extrabold { font-weight: 800; }
.font--black { font-weight: 900; }

/* Font Styles */
.font--italic { font-style: italic; }
.font--not-italic { font-style: normal; }

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

.bg--transparent { background-color: transparent; }
.bg--white { background-color: var(--color-white); }
.bg--primary { background-color: var(--color-primary); }
.bg--secondary { background-color: var(--color-secondary); }
.bg--accent { background-color: var(--color-accent); }
.bg--success { background-color: var(--color-success); }
.bg--warning { background-color: var(--color-warning); }
.bg--error { background-color: var(--color-error); }
.bg--gray { background-color: var(--color-text-light); }
.bg--light { background-color: var(--color-bg); }
.bg--alt { background-color: var(--color-bg-alt); }

/* Gradient Backgrounds */
.bg--gradient-primary {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
}

.bg--gradient-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1e3a5f 100%);
}

.bg--gradient-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.8) 100%);
}

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

.border--0 { border-width: 0; }
.border { border-width: 1px; }
.border--2 { border-width: 2px; }
.border--4 { border-width: 4px; }
.border--8 { border-width: 8px; }

.border--solid { border-style: solid; }
.border--dashed { border-style: dashed; }
.border--dotted { border-style: dotted; }
.border--double { border-style: double; }
.border--none { border-style: none; }

.border--primary { border-color: var(--color-primary); }
.border--secondary { border-color: var(--color-secondary); }
.border--accent { border-color: var(--color-accent); }
.border--success { border-color: var(--color-success); }
.border--warning { border-color: var(--color-warning); }
.border--error { border-color: var(--color-error); }
.border--white { border-color: var(--color-white); }
.border--gray { border-color: var(--color-text-light); }
.border--light { border-color: var(--color-bg-alt); }

.border--t { border-top-width: 1px; }
.border--r { border-right-width: 1px; }
.border--b { border-bottom-width: 1px; }
.border--l { border-left-width: 1px; }

.border--rounded { border-radius: var(--border-radius-md); }
.border--rounded-sm { border-radius: var(--border-radius-sm); }
.border--rounded-lg { border-radius: var(--border-radius-lg); }
.border--rounded-xl { border-radius: var(--border-radius-xl); }
.border--rounded-2xl { border-radius: var(--border-radius-xl); }
.border--rounded-full { border-radius: var(--border-radius-full); }
.border--rounded-none { border-radius: 0; }

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

.shadow--none { box-shadow: none; }
.shadow--sm { box-shadow: var(--shadow-sm); }
.shadow--md { box-shadow: var(--shadow-md); }
.shadow--lg { box-shadow: var(--shadow-lg); }
.shadow--xl { box-shadow: var(--shadow-xl); }
.shadow--inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }

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

.opacity--0 { opacity: 0; }
.opacity--25 { opacity: 0.25; }
.opacity--50 { opacity: 0.5; }
.opacity--75 { opacity: 0.75; }
.opacity--100 { opacity: 1; }

/* ============================================
   TRANSITION UTILITIES
   ============================================ */

.transition--none { transition: none; }
.transition--all { transition: all var(--transition-base); }
.transition--colors { transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base); }
.transition--transform { transition: transform var(--transition-base); }
.transition--opacity { transition: opacity var(--transition-base); }

.duration--75 { transition-duration: 75ms; }
.duration--100 { transition-duration: 100ms; }
.duration--150 { transition-duration: 150ms; }
.duration--200 { transition-duration: 200ms; }
.duration--300 { transition-duration: 300ms; }
.duration--500 { transition-duration: 500ms; }
.duration--700 { transition-duration: 700ms; }
.duration--1000 { transition-duration: 1000ms; }

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

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

.scale--0 { transform: scale(0); }
.scale--50 { transform: scale(0.5); }
.scale--75 { transform: scale(0.75); }
.scale--90 { transform: scale(0.9); }
.scale--95 { transform: scale(0.95); }
.scale--100 { transform: scale(1); }
.scale--105 { transform: scale(1.05); }
.scale--110 { transform: scale(1.1); }
.scale--125 { transform: scale(1.25); }
.scale--150 { transform: scale(1.5); }

.rotate--0 { transform: rotate(0deg); }
.rotate--45 { transform: rotate(45deg); }
.rotate--90 { transform: rotate(90deg); }
.rotate--180 { transform: rotate(180deg); }
.rotate---45 { transform: rotate(-45deg); }
.rotate---90 { transform: rotate(-90deg); }
.rotate---180 { transform: rotate(-180deg); }

.translate--x-0 { transform: translateX(0); }
.translate--y-0 { transform: translateY(0); }

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

.cursor--auto { cursor: auto; }
.cursor--default { cursor: default; }
.cursor--pointer { cursor: pointer; }
.cursor--wait { cursor: wait; }
.cursor--text { cursor: text; }
.cursor--move { cursor: move; }
.cursor--not-allowed { cursor: not-allowed; }

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

.select--none { user-select: none; }
.select--text { user-select: text; }
.select--all { user-select: all; }
.select--auto { user-select: auto; }

/* ============================================
   POINTER EVENTS UTILITIES
   ============================================ */

.pointer--events-none { pointer-events: none; }
.pointer--events-auto { pointer-events: auto; }

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

.z--0 { z-index: 0; }
.z--10 { z-index: 10; }
.z--20 { z-index: 20; }
.z--30 { z-index: 30; }
.z--40 { z-index: 40; }
.z--50 { z-index: 50; }
.z--auto { z-index: auto; }

/* ============================================
   LIST STYLE UTILITIES
   ============================================ */

.list--none { list-style-type: none; }
.list--disc { list-style-type: disc; }
.list--decimal { list-style-type: decimal; }
.list--inside { list-style-position: inside; }
.list--outside { list-style-position: outside; }

/* ============================================
   OBJECT FIT UTILITIES
   ============================================ */

.object--contain { object-fit: contain; }
.object--cover { object-fit: cover; }
.object--fill { object-fit: fill; }
.object--none { object-fit: none; }
.object--scale-down { object-fit: scale-down; }

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

.object--center { object-position: center; }
.object--top { object-position: top; }
.object--top-center { object-position: top center; }
.object--top-right { object-position: top right; }
.object--right { object-position: right; }
.object--bottom { object-position: bottom; }
.object--bottom-center { object-position: bottom center; }
.object--bottom-left { object-position: bottom left; }
.object--left { object-position: left; }

/* ============================================
   SCREEN READER ONLY
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ============================================
   SECTION SPACING
   ============================================ */

.section {
  padding: var(--spacing-4xl) 0;
}

.section--light {
  background-color: var(--color-bg);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--dark {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}

.section--dark p {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   CONTAINER SPACING
   ============================================ */

.container--sm {
  max-width: 640px;
}

.container--md {
  max-width: 768px;
}

.container--lg {
  max-width: 1024px;
}

.container--xl {
  max-width: 1280px;
}

.container--full {
  max-width: 100%;
}

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

.visible { visibility: visible; }
.invisible { visibility: hidden; }