:root {
    --main-bg: #000000;
    --secondary-bg: #f3f4f6;
    --accent-bg: #2563eb;
    --text-on-dark: #ffffff;
    --text-on-light: #1a1a1a;
    --secondary-text-light: #4b5563;
    --secondary-text-dark: #9ca3af;
    --font-main: 'Inter', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --border-radius: 0.5rem;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--main-bg);
    color: var(--text-on-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
    color: inherit;
}

a:hover,
a:focus {
    text-decoration: none;
    opacity: 0.8;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

button,
.btn {
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

button:active,
.btn:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    h2 {
        font-size: clamp(1.5rem, 8vw, 2.25rem);
    }

    h3 {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }

    .mobile-break {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ===== header_section ===== */
#header {
    width: 100%
}

.js-mobile-menu {
    display: none
}

.js-mobile-menu.flex {
    display: flex
}

/* ===== hero_section ===== */
#hero {
    width: 100%;
    transition: background-color 0.5s ease;
}

.js-overlay {
    position: absolute;
    inset: 0;
    transition: background-color 0.5s ease, opacity 0.5s ease;
    z-index: 0;
}

#hero[data-current-theme="light"] .js-overlay {
    background-color: var(--secondary-bg);
    opacity: 0.85;
}

#hero[data-current-theme="dark"] .js-overlay {
    background-color: var(--main-bg);
    opacity: 0.75;
}

#hero[data-current-theme="blue"] .js-overlay {
    background-color: var(--accent-bg);
    opacity: 0.8;
}

#hero[data-current-theme="light"] .js-title {
    color: var(--text-on-light);
}

#hero[data-current-theme="light"] .js-text {
    color: var(--secondary-text-light);
}

#hero[data-current-theme="light"] .js-theme-btn {
    color: var(--text-on-light);
    border-color: var(--text-on-light);
}
#hero[data-current-theme="light"] .js-theme-btn:not(:first-child) {
    color: var(--text-on-dark);
    border-color: var(--text-on-dark);
}

#hero[data-current-theme="dark"] .js-title {
    color: var(--text-on-dark);
}

#hero[data-current-theme="dark"] .js-text {
    color: var(--secondary-text-dark);
}

#hero[data-current-theme="dark"] .js-theme-btn {
    color: var(--text-on-dark);
    border-color: var(--text-on-dark);
}
#hero[data-current-theme="dark"] .js-theme-btn:first-child {
    color: var(--text-on-light);
    border-color: var(--text-on-light);
}

#hero[data-current-theme="blue"] .js-title {
    color: var(--text-on-dark);
}

#hero[data-current-theme="blue"] .js-text {
    color: var(--text-on-dark);
    opacity: 0.9;
}

#hero[data-current-theme="blue"] .js-theme-btn {
    color: var(--text-on-dark);
    border-color: var(--text-on-dark);
}
#hero[data-current-theme="blue"] .js-theme-btn:first-child {
    color: var(--text-on-light);
    border-color: var(--text-on-light);
}

#hero[data-current-theme="light"] .js-cta-btn {
    background-color: var(--accent-bg);
    color: var(--text-on-dark);
}

#hero[data-current-theme="dark"] .js-cta-btn {
    background-color: var(--accent-bg);
    color: var(--text-on-dark);
}

#hero[data-current-theme="blue"] .js-cta-btn {
    background-color: var(--secondary-bg);
    color: var(--accent-bg);
}

/* ===== tour_timeline ===== */
#about .timeline-middle {
    color: var(--accent-bg);
}

#about .timeline-hr {
    background-color: var(--accent-bg);
    opacity: 0.3;
}

#about .timeline-start,
#about .timeline-end {
    color: var(--text-on-dark);
}

/* ===== tour_benefits ===== */
#benefits {
    width: 100%;
}

.ph {
    display: inline-block;
    line-height: 1;
}

/* ===== tour_dates ===== */
#poster {
    width: 100%;
}

.js-tour-row {
    transition: background-color 0.3s ease;
}

/* ===== ticket_categories ===== */
#tickets {
    width: 100%;
}

.js-ticket-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.js-ticket-card:hover {
    transform: translateY(-15px);
}

/* ===== concert_experience ===== */
.container {
    width: 100%;
}

/* ===== target_audience ===== */
.ph-bold {
    display: inline-block;
    line-height: 1;
}

/* ===== purchase_guide ===== */
.js-whatsapp-btn {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* ===== faq_section ===== */
.faq-full-width {
    width: 100%
}

.faq-active {
    border-color: var(--accent-bg) !important;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.1)
}

/* ===== footer_section ===== */
#footer {
    border-top: 1px solid rgba(156, 163, 175, 0.1);
}