/**
 * XVaultPro Design System - Utility Classes
 * Reusable utility classes for the XVaultPro brand
 */

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

.xv-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--page-padding-x);
}

.xv-section {
    padding: var(--page-padding-y) 0;
}

.xv-page {
    position: relative;
    min-height: 100vh;
    padding: var(--page-padding-y) var(--page-padding-x);
    background: var(--bg-primary);
}

/* Grid Systems */
.xv-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.xv-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.xv-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

@media (max-width: 1024px) {
    .xv-grid-3, .xv-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .xv-container {
        padding: 0 var(--space-6);
    }

    .xv-page {
        padding: var(--space-12) var(--space-6);
    }

    .xv-grid-2, .xv-grid-3, .xv-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Flex Utilities */
.xv-flex { display: flex; }
.xv-flex-col { flex-direction: column; }
.xv-items-center { align-items: center; }
.xv-items-start { align-items: flex-start; }
.xv-items-end { align-items: flex-end; }
.xv-justify-center { justify-content: center; }
.xv-justify-between { justify-content: space-between; }
.xv-justify-end { justify-content: flex-end; }
.xv-gap-2 { gap: var(--space-2); }
.xv-gap-4 { gap: var(--space-4); }
.xv-gap-6 { gap: var(--space-6); }
.xv-gap-8 { gap: var(--space-8); }

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

/* Headings */
.xv-h1 {
    font-family: var(--font-heading);
    font-size: var(--h1-size);
    font-weight: var(--font-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-12);
}

.xv-h1 .bold {
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.xv-h1 .light {
    font-weight: var(--font-light);
    color: var(--vault-emerald);
}

.xv-h2 {
    font-family: var(--font-heading);
    font-size: var(--h2-size);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: var(--space-10);
}

.xv-h3 {
    font-family: var(--font-heading);
    font-size: var(--h3-size);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--vault-emerald);
    margin-bottom: var(--space-5);
}

/* Body Text */
.xv-text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
}

.xv-text-lg {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
}

.xv-text-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

.xv-text-xs {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

/* Accent Text */
.xv-accent {
    font-family: var(--font-accent);
    font-style: italic;
    color: rgba(16, 185, 129, 0.7);
}

/* Code Text */
.xv-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--vault-emerald);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* Brand Name */
.xv-brand {
    font-family: var(--font-heading);
}

.xv-brand .bold {
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.xv-brand .light {
    font-weight: var(--font-light);
    color: var(--vault-emerald);
}

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

.xv-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    transition: var(--transition-all);
}

.xv-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-lg);
}

.xv-card-solid {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-default);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
}

.xv-card-success {
    border-color: var(--success);
    background: var(--success-bg);
}

.xv-card-warning {
    border-color: var(--warning);
    background: var(--warning-bg);
}

.xv-card-danger {
    border-color: var(--danger);
    background: var(--danger-bg);
}

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

.xv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: var(--font-heading);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    border-radius: var(--btn-radius);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
}

.xv-btn-primary {
    background: linear-gradient(135deg, var(--vault-emerald), var(--vault-dark));
    color: var(--text-primary);
    box-shadow: var(--glow-badge);
}

.xv-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-lg);
}

.xv-btn-secondary {
    background: transparent;
    color: var(--vault-emerald);
    border: 2px solid var(--vault-emerald);
}

.xv-btn-secondary:hover {
    background: rgba(16, 185, 129, 0.1);
}

.xv-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-4);
}

.xv-btn-ghost:hover {
    color: var(--vault-emerald);
}

.xv-btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

.xv-btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

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

.xv-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, var(--vault-emerald), var(--vault-dark));
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-primary);
}

.xv-badge-outline {
    background: transparent;
    border: 1px solid var(--vault-emerald);
    color: var(--vault-emerald);
}

.xv-badge-success {
    background: var(--success);
}

.xv-badge-warning {
    background: var(--warning);
    color: var(--bg-primary);
}

.xv-badge-danger {
    background: var(--danger);
}

/* ==================================================
   RULER & BRAND ELEMENTS
================================================== */

.xv-ruler-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    display: flex;
}

.xv-ruler-mark {
    flex: 1;
    border-left: 1px solid rgba(16, 185, 129, 0.2);
}

.xv-ruler-mark:first-child {
    border-left: none;
}

.xv-section-label {
    position: absolute;
    top: 40px;
    left: 60px;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: rgba(16, 185, 129, 0.6);
}

.xv-page-number {
    position: absolute;
    top: 40px;
    right: 60px;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    color: var(--vault-emerald);
}

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

.xv-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0;
}

.xv-list li {
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    position: relative;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.xv-list li::before {
    content: '\25B8';
    position: absolute;
    left: 0;
    color: var(--vault-emerald);
    font-weight: bold;
}

.xv-list-check li::before {
    content: '\2713';
    color: var(--success);
}

.xv-list-cross li::before {
    content: '\2717';
    color: var(--danger);
}

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

.xv-alert {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    border-left: 4px solid;
    margin: var(--space-5) 0;
}

.xv-alert-success {
    background: var(--success-bg);
    border-color: var(--success);
}

.xv-alert-warning {
    background: var(--warning-bg);
    border-color: var(--warning);
}

.xv-alert-danger {
    background: var(--danger-bg);
    border-color: var(--danger);
}

.xv-alert strong {
    color: var(--text-primary);
}

/* ==================================================
   CODE BLOCK UTILITIES
================================================== */

.xv-code-block {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-secondary);
    overflow-x: auto;
    margin: var(--space-4) 0;
}

.xv-code-block .comment {
    color: var(--text-muted);
}

.xv-code-block .keyword {
    color: var(--vault-emerald);
}

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

.xv-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: var(--text-sm);
}

.xv-table th {
    background: rgba(16, 185, 129, 0.15);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-bottom: 2px solid var(--vault-emerald);
    color: var(--vault-emerald);
}

.xv-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.xv-table tr:hover {
    background: rgba(16, 185, 129, 0.03);
}

.xv-table tr.highlight {
    background: rgba(16, 185, 129, 0.1);
}

.xv-table tr.highlight td {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

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

.xv-fade-in {
    animation: fadeIn var(--transition-slow) ease-out;
}

.xv-fade-in-up {
    animation: fadeInUp 0.7s ease-out;
}

.xv-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.xv-glow {
    animation: glow 2s ease-in-out infinite;
}

/* Scroll-triggered (used with Alpine.js x-intersect) */
.xv-animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.xv-animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

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

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

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

.xv-p-4 { padding: var(--space-4); }
.xv-p-6 { padding: var(--space-6); }
.xv-p-8 { padding: var(--space-8); }

.xv-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.xv-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.xv-py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.xv-py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

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

.xv-hidden { display: none; }
.xv-block { display: block; }
.xv-inline { display: inline; }
.xv-inline-block { display: inline-block; }

@media (max-width: 768px) {
    .xv-hidden-mobile { display: none; }
}

@media (min-width: 769px) {
    .xv-hidden-desktop { display: none; }
}

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

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

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

.xv-w-full { width: 100%; }
.xv-max-w-sm { max-width: 640px; }
.xv-max-w-md { max-width: 768px; }
.xv-max-w-lg { max-width: 1024px; }
.xv-max-w-xl { max-width: 1280px; }