/* =====================================================
 * DecryptCode INC — Utilities
 * Spacing, text, display, visibility helpers
 * Last Updated: February 21, 2026
 * ===================================================== */

/* ═══════════════════════════════════════════
 * TEXT ALIGNMENT
 * ═══════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════
 * TEXT SIZE
 * ═══════════════════════════════════════════ */

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* ═══════════════════════════════════════════
 * TEXT STYLE
 * ═══════════════════════════════════════════ */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

.weight-normal    { font-weight: var(--weight-normal); }
.weight-medium    { font-weight: var(--weight-medium); }
.weight-semibold  { font-weight: var(--weight-semibold); }
.weight-bold      { font-weight: var(--weight-bold); }
.weight-extrabold { font-weight: var(--weight-extrabold); }

.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.tracking-tight  { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide   { letter-spacing: var(--tracking-wide); }
.tracking-wider  { letter-spacing: var(--tracking-wider); }
.tracking-mono   { letter-spacing: var(--tracking-mono); }

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.no-wrap    { white-space: nowrap; }
.truncate   {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
 * TEXT COLORS
 * ═══════════════════════════════════════════ */

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-accent    { color: var(--text-accent); }
.text-inverse   { color: var(--text-inverse); }

/* ═══════════════════════════════════════════
 * DISPLAY
 * ═══════════════════════════════════════════ */

.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-none         { display: none; }

/* ═══════════════════════════════════════════
 * FLEXBOX HELPERS
 * ═══════════════════════════════════════════ */

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

.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; }

.flex-col  { flex-direction: column; }
.flex-row  { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1    { flex: 1; }
.flex-none { flex: none; }
.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* ═══════════════════════════════════════════
 * SPACING — Margin
 * ═══════════════════════════════════════════ */

.m-0  { margin: 0; }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }

.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-inline: auto; }

/* ═══════════════════════════════════════════
 * SPACING — Padding
 * ═══════════════════════════════════════════ */

.p-0  { padding: 0; }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.pt-0  { padding-top: 0; }
.pb-0  { padding-bottom: 0; }
.px-4  { padding-inline: var(--space-4); }
.py-4  { padding-block: var(--space-4); }
.py-6  { padding-block: var(--space-6); }
.py-8  { padding-block: var(--space-8); }
.py-12 { padding-block: var(--space-12); }

/* ═══════════════════════════════════════════
 * GAP
 * ═══════════════════════════════════════════ */

.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ═══════════════════════════════════════════
 * WIDTH / HEIGHT
 * ═══════════════════════════════════════════ */

.w-full   { width: 100%; }
.w-auto   { width: auto; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-xl { max-width: var(--container-xl); }

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

/* ═══════════════════════════════════════════
 * POSITION
 * ═══════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════
 * OVERFLOW
 * ═══════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════
 * BORDER / RADIUS
 * ═══════════════════════════════════════════ */

.rounded-none { border-radius: 0; }
.rounded-sm   { 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); }

.border          { border: 1px solid var(--border-default); }
.border-subtle   { border: 1px solid var(--border-subtle); }
.border-accent   { border: 1px solid var(--accent-border); }
.border-top      { border-top: 1px solid var(--border-subtle); }
.border-bottom   { border-bottom: 1px solid var(--border-subtle); }

/* ═══════════════════════════════════════════
 * BACKGROUND
 * ═══════════════════════════════════════════ */

.bg-primary   { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary  { background-color: var(--bg-tertiary); }
.bg-glass     { background: var(--glass-bg); backdrop-filter: var(--backdrop-blur); }

/* ═══════════════════════════════════════════
 * VISIBILITY
 * ═══════════════════════════════════════════ */

.visible   { visibility: visible; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* Hide visually but keep accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ═══════════════════════════════════════════
 * RESPONSIVE VISIBILITY
 * ═══════════════════════════════════════════ */

.hide-mobile  { display: none; }
.show-mobile  { display: block; }

@media (min-width: 768px) {
  .hide-mobile  { display: block; }
  .show-mobile  { display: none; }
  .hide-tablet  { display: none; }
  .text-md-left   { text-align: left; }
  .text-md-center { text-align: center; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none; }
  .hide-tablet  { display: block; }
  .d-lg-flex  { display: flex; }
  .d-lg-none  { display: none; }
  .d-lg-block { display: block; }
}

/* ═══════════════════════════════════════════
 * CURSOR
 * ═══════════════════════════════════════════ */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* ═══════════════════════════════════════════
 * SELECTION COLOR
 * ═══════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════
 * Z-INDEX
 * ═══════════════════════════════════════════ */

.z-0     { z-index: 0; }
.z-10    { z-index: 10; }
.z-20    { z-index: 20; }
.z-above { z-index: var(--z-above); }