/*
 * Spacing Enhancements for EnigmAPI
 * World-class spacing patterns for common UI elements
 * Version: 1.0.0
 */

/* ================================
   LABEL-VALUE PAIRS
   Perfect for settings, details pages, etc.
   ================================ */

.detail-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: var(--tracking-wide);
    line-height: var(--line-height-normal);
}

.detail-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: var(--line-height-snug);
}

.detail-value-large {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--line-height-tight);
}

/* Horizontal layout for label-value pairs */
.detail-row--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* ================================
   SECTION HEADERS
   Improved spacing for section titles
   ================================ */

.section-header {
    margin-bottom: var(--space-8);
}

.section-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-3);
}

.section-description {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--tracking-normal);
}

/* ================================
   CARD SPACING
   Improved internal card spacing
   ================================ */

.card-spaced {
    padding: var(--space-8);
}

.card-spaced .card-header {
    margin-bottom: var(--space-6);
}

.card-spaced .card-body {
    margin-bottom: var(--space-6);
}

.card-spaced .card-body:last-child {
    margin-bottom: 0;
}

.card-spaced .card-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(148, 163, 184, 0.06);
}

/* ================================
   BUTTON GROUP SPACING
   Proper spacing for action buttons
   ================================ */

.button-group {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

.button-group--tight {
    gap: var(--space-2);
}

.button-group--loose {
    gap: var(--space-6);
}

/* ================================
   PAGE HEADER SPACING
   Enhanced spacing for page titles and actions
   ================================ */

.page-header-enhanced {
    margin-bottom: var(--space-10);
}

.page-header-enhanced .page-title {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: var(--tracking-tighter);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
}

.page-header-enhanced .page-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--tracking-normal);
}

/* ================================
   LIST SPACING
   Better vertical rhythm for lists
   ================================ */

.list-spaced {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-spaced > li {
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}

.list-spaced > li:last-child {
    border-bottom: none;
}

.list-spaced--tight > li {
    padding: var(--space-3) 0;
}

.list-spaced--loose > li {
    padding: var(--space-6) 0;
}

/* ================================
   FORM SPACING
   Professional form field spacing
   ================================ */

.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-wide);
}

.form-help-text {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: var(--space-2);
    line-height: var(--line-height-relaxed);
}

.form-section {
    margin-bottom: var(--space-10);
}

.form-section:last-child {
    margin-bottom: 0;
}

/* ================================
   STAT/METRIC DISPLAY
   Enhanced spacing for statistics
   ================================ */

.stat-display {
    padding: var(--space-6);
}

.stat-display-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    margin-bottom: var(--space-3);
}

.stat-display-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.stat-display-change {
    font-size: 14px;
    font-weight: 600;
    line-height: var(--line-height-normal);
}

/* ================================
   TABLE SPACING
   Enhanced table cell spacing
   ================================ */

.table-enhanced th {
    padding: var(--space-4) var(--space-5);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    line-height: var(--line-height-normal);
}

.table-enhanced td {
    padding: var(--space-5) var(--space-5);
    font-size: 15px;
    line-height: var(--line-height-relaxed);
}

/* ================================
   SPACING HELPERS
   Quick spacing utilities for common patterns
   ================================ */

/* Vertical rhythm for content blocks */
.prose > * + * {
    margin-top: var(--space-6);
}

.prose h1,
.prose h2,
.prose h3 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-tight);
}

.prose p {
    line-height: var(--line-height-relaxed);
}

.prose ul,
.prose ol {
    margin-left: var(--space-6);
}

.prose li + li {
    margin-top: var(--space-3);
}

/* Content width limiting for readability */
.prose {
    max-width: 65ch;
}

/* ================================
   RESPONSIVE SPACING
   Adjust spacing on smaller screens
   ================================ */

@media (max-width: 768px) {
    .detail-row {
        padding: var(--space-5) 0;
    }

    .section-title {
        font-size: 24px;
    }

    .page-header-enhanced .page-title {
        font-size: 32px;
    }

    .card-spaced {
        padding: var(--space-6);
    }

    .stat-display-value {
        font-size: 28px;
    }
}