/* Utility Classes */
/* Text Align */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Text Color */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-muted { color: var(--color-text-muted); }
.text-white { color: #ffffff; }

/* Font Weight */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

/* Spacing Helpers (Margins) */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-5 { margin-top: var(--space-xl); }

.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-5 { margin-bottom: var(--space-xl); }

/* Padding Helpers */
.p-0 { padding: 0; }
.py-1 { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-2 { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-3 { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-4 { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-5 { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

.pt-1 { padding-top: var(--space-xs); }
.pt-2 { padding-top: var(--space-sm); }
.pt-3 { padding-top: var(--space-md); }
.pt-4 { padding-top: var(--space-lg); }
.pt-5 { padding-top: var(--space-xl); }

.pb-1 { padding-bottom: var(--space-xs); }
.pb-2 { padding-bottom: var(--space-sm); }
.pb-3 { padding-bottom: var(--space-md); }
.pb-4 { padding-bottom: var(--space-lg); }
.pb-5 { padding-bottom: var(--space-xl); }

/* Backgrounds */
.bg-white { background-color: var(--color-bg-white); }
.bg-light { background-color: var(--color-bg); }
.bg-primary { background-color: var(--color-primary); color: #ffffff; }
.bg-dark { background-color: var(--color-dark); color: #ffffff; }

/* Border utility */
.border-all { border: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

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

/* Aspect ratio helper */
.ratio-16-9 {
    aspect-ratio: 16/9;
    background-color: var(--color-bg-alt);
    position: relative;
    overflow: hidden;
}

.ratio-1-1 {
    aspect-ratio: 1/1;
    background-color: var(--color-bg-alt);
    position: relative;
    overflow: hidden;
}