/* c:\xampp\htdocs\tune-dist\assets\css\theme.css */
/* Unified Theme Layer - Uses design tokens from style.css */

:root {
    /* Recommended Palette */
    --palette-primary: #8b0000;
    --palette-secondary: #a30000;
    --palette-accent: #8b0000;
    --palette-background: #0f0f0f;
}

body {
    color-scheme: dark;
}

/* Global layout/typography normalization */
main.main-content {
    padding-inline: var(--layout-gutter);
}

main.main-content> :where(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .view-container) {
    max-width: var(--layout-max-width);
    margin-inline: auto;
}

.table th,
.table-custom th,
.meta-label,
.text-label,
.badge,
.badge-custom,
.small,
.text-xs {
    font-size: var(--fs-xs) !important;
}

.table td,
.table-custom td,
.form-control,
.form-select,
.form-label,
.btn,
.nav-link,
.dropdown-item,
.meta-value,
.track-title,
.helper {
    font-size: var(--fs-sm) !important;
}

.view-container {
    max-width: var(--layout-max-width) !important;
    margin-inline: auto !important;
}

/* Better visual hierarchy */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: var(--font-display);
    letter-spacing: -0.03em;
}

/* Subtle motion polish */
.card,
.card-custom,
.btn,
.nav-link-custom,
.table tbody tr,
.table-custom tbody tr {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Improve readable defaults for bootstrap helper classes */
.text-white {
    color: #f4f8ff !important;
}

.text-black,
.text-body {
    color: var(--text-main) !important;
}

/* Focus polish for accessibility */
.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.3) !important;
}

/* Hover polish */
.table-hover>tbody>tr:hover>* {
    background-color: rgba(139, 0, 0, 0.08) !important;
}

/* Mobile adjustments */
@media (max-width: 991.98px) {
    .main-content {
        padding-inline: var(--layout-gutter);
    }

    .table-responsive {
        border-radius: 12px;
    }
}