/* ==========================================================================
   Utilities
   ========================================================================== */

/* ──────────────── SURFACES ──────────────── */

.surface {
    background-color: var(--color-surface);
}

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

/* ──────────────── RADIUS ──────────────── */

.radius-sm {
    border-radius: var(--radius-sm);
}

.radius-md {
    border-radius: var(--radius-md);
}

.radius-lg {
    border-radius: var(--radius-lg);
}

.radius-pill {
    border-radius: var(--radius-pill);
}

.radius-full {
    border-radius: var(--radius-full);
}

/* ──────────────── SHADOWS ──────────────── */

.shadow-xs {
    box-shadow: var(--shadow-xs);
}

.shadow-card {
    box-shadow: var(--shadow-card);
}

.shadow-card-raised {
    box-shadow: var(--shadow-card-raised);
}

.shadow-overlay {
    box-shadow: var(--shadow-overlay);
}

.shadow-inset {
    box-shadow: var(--shadow-inset);
}

.shadow-focus-ring {
    box-shadow: var(--shadow-focus-ring);
}

/* ──────────────── TEXT ──────────────── */

/* Colours */
.color-text { color: var(--color-text); }
.color-text-secondary { color: var(--color-text-secondary); }
.color-text-muted { color: var(--color-text-muted); }
.color-text-placeholder { color: var(--color-text-placeholder); }
.color-text-light { color: var(--color-text-light); }
.color-text-on-dark { color: var(--color-text-on-dark); }
.color-text-on-brand { color: var(--color-text-on-brand); }

.color-brand-red { color: var(--color-brand-red); }
.color-brand-blue { color: var(--color-brand-blue); }
.color-accent-blue { color: var(--color-accent-blue); }
.color-accent-gold { color: var(--color-accent-gold); }

/* Sizes */
.fs-sm { font-size: var(--fs-sm); }
.fs-base { font-size: var(--fs-base); }
.fs-md { font-size: var(--fs-md); }
.fs-lg { font-size: var(--fs-lg); }
.fs-xl { font-size: var(--fs-xl); }
.fs-2xl { font-size: var(--fs-2xl); }

/* Weights */
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }

/* Leading */
.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-loose { line-height: var(--leading-loose); }

/* ──────────────── PADDING ──────────────── */

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }

.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); }

.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-7 { padding-left: var(--space-7); padding-right: var(--space-7); }

/* ──────────────── LAYOUT HELPERS ──────────────── */

.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-7 > * + * { margin-top: var(--space-7); }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }

.grid-cards {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ──────────────── BUTTONS ──────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-solid {
    background-color: var(--color-brand-red);
    color: var(--color-text-on-brand);
}

.btn-solid:hover {
    background-color: var(--color-brand-red-hover);
}

.btn-solid:active {
    background-color: var(--color-brand-red-active);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-brand-red);
    border-color: var(--color-brand-red);
}

.btn-outline:hover {
    background-color: var(--color-brand-red-subtle);
}

.btn-outline:active {
    background-color: var(--color-brand-red-subtle);
}