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

/* Background Utilities */
.bg-primary               { background-color: var(--primary); }
.bg-primary-light         { background-color: var(--primary-light); }
.bg-primary-medium-light  { background-color: var(--primary-medium-light); }
.bg-primary-hover         { background-color: var(--primary-hover); }
.bg-primary-trans-10      { background-color: var(--primary-trans-10); }
.bg-primary-trans-20      { background-color: var(--primary-trans-20); }

.bg-secondary             { background-color: var(--secondary); }
.bg-secondary-light       { background-color: var(--secondary-light); }
.bg-secondary-hover       { background-color: var(--secondary-hover); }
.bg-secondary-trans-10    { background-color: var(--secondary-trans-10); }

.bg-light                 { background-color: var(--bg-surface); }
.bg-muted                 { background-color: var(--bg-muted); }
.bg-elevated              { background-color: var(--bg-surface-elevated); }
.bg-sunken                { background-color: var(--bg-surface-sunken); }

/* Text Color Utilities */
.text-primary             { color: var(--text-primary); }
.text-secondary           { color: var(--text-secondary); }
.text-tertiary            { color: var(--text-tertiary); }
.text-muted               { color: var(--text-muted); }
.text-black               { color: var(--text-black); }

/* Border Utilities */
.border-primary           { border-color: var(--border-primary); }
.border-secondary         { border-color: var(--border-secondary); }
.border-light             { border-color: var(--border-light); }
.border-medium            { border-color: var(--border-medium); }
.border-dark              { border-color: var(--border-dark); }

/* Shadow Utilities */
.shadow-primary           { box-shadow: 0 4px 6px var(--shadow-primary); }
.shadow-secondary         { box-shadow: 0 6px 8px var(--shadow-secondary); }

/* Status Color Utilities */
.bg-success               { background-color: var(--success); }
.bg-error                 { background-color: var(--error); }
.bg-warning               { background-color: var(--warning); }
.bg-info                  { background-color: var(--info); }

.text-success             { color: var(--success); }
.text-error               { color: var(--error); }
.text-warning             { color: var(--warning); }
.text-info                { color: var(--info); }

/* Text Utilities */
.text-xl { font-size: var(--text-xl); }
.text-l  { font-size: var(--text-l); }
.text-m  { font-size: var(--text-m); }
.text-s  { font-size: var(--text-s); }
.text-xs { font-size: var(--text-xs); }

.primary-gradient {
  background: linear-gradient(to right, #003f8c, #0066cc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.line-limit-3, .line-limit-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-limit-3 { -webkit-line-clamp: 3; }
.line-limit-2 { -webkit-line-clamp: 2; }

.line-limit-responsive {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
.line-limit-responsive::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  height: 1.5em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bg-surface) 70%);
  pointer-events: none;
}
@media (max-width: 480px) {
  .line-limit-responsive { -webkit-line-clamp: 1; }
}
@media (min-width: 481px) and (max-width: 1024px) {
  .line-limit-responsive { -webkit-line-clamp: 2; }
}
@media (min-width: 1025px) {
  .line-limit-responsive { -webkit-line-clamp: 3; }
}

.no-ul a { text-decoration: none !important; }
.balance { text-wrap: balance; }

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
    transform: none !important;
  }
}

@media (pointer: coarse) {
  .btn {
    padding: 1.2em 2.8em;
    min-width: auto;
  }
}