/* Explain: Base styles updated for unified typography and improved dark mode. - */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    font-family: var(--font-body);
}

/* --- UNIFIED TYPOGRAPHY SYSTEM --- */

/* 1. Global Font */
h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading) !important;
}

/* 2. Responsive Headings */
/* H1: 48px Desktop / 36px Mobile - 700 */
h1, .text-5xl, .text-6xl {
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}
@media (min-width: 1024px) {
    h1, .text-5xl, .text-6xl { font-size: 48px !important; }
}

/* H2: 36px Desktop / 30px Mobile - 700 */
h2, h2.text-3xl, h2.text-4xl, .text-3xl.font-bold, .text-4xl.font-bold {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
}
@media (min-width: 1024px) {
    h2, h2.text-3xl, h2.text-4xl, .text-3xl.font-bold, .text-4xl.font-bold { font-size: 36px !important; }
}

/* H3: 24px - 600 */
h3, h3.text-xl, h3.text-2xl, .text-2xl.font-bold {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

/* H4: 20px - 600 */
h4, h4.text-lg, h4.text-xl, .text-xl.font-bold {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
}

/* 3. Body Text: 16px - 400 */
p:not(.text-xs):not(.text-sm) {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* 4. Small / Supporting Text: 14px - 400 */
.text-sm {
    font-size: 14px !important;
}
p.text-sm, span.text-sm:not(.font-bold):not(.font-semibold) {
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* 5. Navigation: 16px - 500 */
header nav a:not(.font-bold), [x-show="mobileMenuOpen"] a {
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

/* 6. Buttons & CTAs: 16px - 600 */
a.rounded-full, a.rounded-md, a.rounded-xl,
button.rounded-full, button.rounded-md, button.rounded-xl,
label.cursor-pointer.rounded-md {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em !important;
}
/* Protect icon buttons */
.w-8, .w-10, .w-12, .w-[34px] {
    font-size: inherit !important;
    letter-spacing: inherit !important;
}

/* 7. Forms: Labels 14px-500, Inputs 16px-400 */
label:not(.cursor-pointer) {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
input::placeholder, textarea::placeholder {
    font-size: 16px !important;
    font-weight: 400 !important;
    opacity: 0.6;
}

/* 8. Helper / Guidance / Error: 13.5px */
.text-xs {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
}
p.text-xs, span.text-xs.text-gray-400, span.text-xs.text-gray-500 {
    font-weight: 400 !important;
}
span.text-red-500, div.text-red-400, span.text-red-400, .has-error span {
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

/* 9. Footer Text: 14px - 400 */
footer p, footer a, footer li, footer span {
    font-size: 14px !important;
    font-weight: 400 !important;
}
footer h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Dark Mode Override for Light Theme Defaults */
.bg-white {
    background-color: var(--surface-alt) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}