/* ==========================================================================
   VLab-4000 — Utilities
   ========================================================================== */

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */

/* Skip to main content link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-16);
    z-index: 9999;
    padding: var(--space-12) var(--space-24);
    background-color: var(--color-accent);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-decoration: none;
    transition: top var(--transition-fast);
    white-space: nowrap;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--white);
    outline-offset: -3px;
}

/* Screen reader only — visually hidden but accessible */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focusable sr-only (skip links etc.) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* =========================================================================
   TEXT ALIGNMENT
   ========================================================================= */

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

/* =========================================================================
   TEXT TRANSFORM
   ========================================================================= */

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

/* =========================================================================
   FONT WEIGHT
   ========================================================================= */

.font-light    { font-weight: var(--weight-light); }
.font-regular  { font-weight: var(--weight-regular); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

/* =========================================================================
   TEXT COLOR
   ========================================================================= */

.text-primary   { color: var(--color-primary) !important; }
.text-accent    { color: var(--color-accent) !important; }
.text-cta       { color: var(--color-cta) !important; }
.text-white     { color: var(--white) !important; }
.text-muted     { color: var(--ink-300) !important; }
.text-light     { color: var(--ink-500) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-error     { color: var(--color-error) !important; }
.text-inherit   { color: inherit !important; }

/* =========================================================================
   BACKGROUND COLOR
   ========================================================================= */

.bg-white    { background-color: var(--white); }
.bg-alt      { background-color: var(--color-bg-alt); }
.bg-primary  { background-color: var(--color-primary); }
.bg-accent   { background-color: var(--color-accent); }
.bg-cta      { background-color: var(--color-cta); }
.bg-dark     { background-color: var(--ink-900); }

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

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

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

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

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

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

/* =========================================================================
   WIDTH / HEIGHT
   ========================================================================= */

.w-full    { width: 100%; }
.w-auto    { width: auto; }
.h-full    { height: 100%; }
.h-screen  { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.max-w-full  { max-width: 100%; }

/* =========================================================================
   SPACING HELPERS — Margin Top
   ========================================================================= */

.mt-0   { margin-top: 0; }
.mt-4   { margin-top: var(--space-4); }
.mt-8   { margin-top: var(--space-8); }
.mt-12  { margin-top: var(--space-12); }
.mt-16  { margin-top: var(--space-16); }
.mt-20  { margin-top: var(--space-20); }
.mt-24  { margin-top: var(--space-24); }
.mt-32  { margin-top: var(--space-32); }
.mt-40  { margin-top: var(--space-40); }
.mt-48  { margin-top: var(--space-48); }
.mt-64  { margin-top: var(--space-64); }
.mt-96  { margin-top: var(--space-96); }
.mt-auto { margin-top: auto; }

/* =========================================================================
   SPACING HELPERS — Margin Bottom
   ========================================================================= */

.mb-0   { margin-bottom: 0; }
.mb-4   { margin-bottom: var(--space-4); }
.mb-8   { margin-bottom: var(--space-8); }
.mb-12  { margin-bottom: var(--space-12); }
.mb-16  { margin-bottom: var(--space-16); }
.mb-20  { margin-bottom: var(--space-20); }
.mb-24  { margin-bottom: var(--space-24); }
.mb-32  { margin-bottom: var(--space-32); }
.mb-40  { margin-bottom: var(--space-40); }
.mb-48  { margin-bottom: var(--space-48); }
.mb-64  { margin-bottom: var(--space-64); }
.mb-96  { margin-bottom: var(--space-96); }
.mb-auto { margin-bottom: auto; }

/* =========================================================================
   SPACING HELPERS — Margin Left / Right
   ========================================================================= */

.ml-0    { margin-left: 0; }
.ml-auto { margin-left: auto; }
.ml-8    { margin-left: var(--space-8); }
.ml-16   { margin-left: var(--space-16); }

.mr-0    { margin-right: 0; }
.mr-auto { margin-right: auto; }
.mr-8    { margin-right: var(--space-8); }
.mr-16   { margin-right: var(--space-16); }

/* Horizontal auto margin */
.mx-auto { margin-left: auto; margin-right: auto; }

/* =========================================================================
   SPACING HELPERS — Padding
   ========================================================================= */

.p-0    { padding: 0; }
.p-8    { padding: var(--space-8); }
.p-12   { padding: var(--space-12); }
.p-16   { padding: var(--space-16); }
.p-24   { padding: var(--space-24); }
.p-32   { padding: var(--space-32); }
.p-48   { padding: var(--space-48); }

.pt-0   { padding-top: 0; }
.pt-16  { padding-top: var(--space-16); }
.pt-24  { padding-top: var(--space-24); }
.pt-32  { padding-top: var(--space-32); }
.pt-48  { padding-top: var(--space-48); }
.pt-64  { padding-top: var(--space-64); }
.pt-96  { padding-top: var(--space-96); }

.pb-0   { padding-bottom: 0; }
.pb-16  { padding-bottom: var(--space-16); }
.pb-24  { padding-bottom: var(--space-24); }
.pb-32  { padding-bottom: var(--space-32); }
.pb-48  { padding-bottom: var(--space-48); }
.pb-64  { padding-bottom: var(--space-64); }
.pb-96  { padding-bottom: var(--space-96); }

.px-16  { padding-left: var(--space-16); padding-right: var(--space-16); }
.px-24  { padding-left: var(--space-24); padding-right: var(--space-24); }
.px-32  { padding-left: var(--space-32); padding-right: var(--space-32); }

.py-16  { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-24  { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.py-32  { padding-top: var(--space-32); padding-bottom: var(--space-32); }
.py-48  { padding-top: var(--space-48); padding-bottom: var(--space-48); }

/* =========================================================================
   BORDER RADIUS
   ========================================================================= */

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

/* =========================================================================
   BOX SHADOW
   ========================================================================= */

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

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

.border          { border: var(--border); }
.border-top      { border-top: var(--border); }
.border-bottom   { border-bottom: var(--border); }
.border-none     { border: none !important; }

.border-accent   { border-color: var(--color-accent); }
.border-primary  { border-color: var(--color-primary); }
.border-cta      { border-color: var(--color-cta); }

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

.cursor-pointer    { cursor: pointer; }
.cursor-default    { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab       { cursor: grab; }

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

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

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

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

/* =========================================================================
   TRUNCATE / CLAMP TEXT
   ========================================================================= */

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

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

/* =========================================================================
   NO SELECT
   ========================================================================= */

.no-select {
    -webkit-user-select: none;
    user-select: none;
}

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

@media print {
    .print-hidden { display: none !important; }
    .print-only   { display: block !important; }
}

.print-only {
    display: none;
}

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

.transition-fast   { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-slow   { transition: all var(--transition-slow); }
.transition-none   { transition: none; }

/* =========================================================================
   FOCUS RING
   ========================================================================= */

.focus-ring:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* =========================================================================
   LOADING SKELETON
   ========================================================================= */

.skeleton {
    background-color: var(--color-border);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* =========================================================================
   SPINNING LOADER
   ========================================================================= */

.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(43, 45, 66, 0.2);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 0.7s linear infinite;
}

.spinner--accent {
    border-color: rgba(217, 4, 41, 0.2);
    border-top-color: var(--color-accent);
}

.spinner--white {
    border-color: rgba(255, 255, 255, 0.25);
    border-top-color: var(--white);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}