:root {
    --sts-primary: #ff8a4c;
    --sts-primary-dark: #5f6673;
    --sts-primary-hover: #f0783f;
    --sts-primary-soft: #fff4ee;
    --sts-primary-tint: #ffd8c3;
    --sts-surface: #ffffff;
    --sts-surface-soft: #fff9f5;
    --sts-muted: #6b7280;
    --sts-border: rgba(255, 138, 76, 0.24);
    --sts-shadow: rgba(95, 102, 115, 0.12);
    --sts-orange: var(--sts-primary);
    --sts-dark: var(--sts-primary-dark);
    --sts-light: var(--sts-surface-soft);
    --bs-primary: var(--sts-primary);
    --bs-primary-rgb: 255, 138, 76;
    --bs-link-color: var(--sts-primary-hover);
    --bs-link-hover-color: var(--sts-primary-dark);
}

body {
    background: var(--sts-surface) !important;
    color: var(--sts-primary-dark) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-sts-dark,
.text-sts-dark,
.text-dark,
.section-title,
.amount-display,
.amount-card h3,
.faq-question {
    color: var(--sts-primary-dark) !important;
}

.text-orange,
.text-sts-orange,
.text-primary,
a,
.nav-link:hover,
.nav-link.active,
.navbar .active,
.card-icon,
.info-icon,
.step-number,
.accordion-button:not(.collapsed),
.form-check-input:checked + .form-check-label {
    color: var(--sts-primary) !important;
}

.bg-sts-orange,
.bg-sts-orange,
.bg-orange,
.bg-sts-orange,
.bg-primary,
.impact-section,
.cta-section,
.donate-bar,
.progress-bar,
.badge-in_shelter,
.back-to-top,
.hero-play-icon,
.process-number,
.timeline-dot,
.footer-social-link:hover,
.landing-footer .footer-social-link:hover,
.landing-footer .footer-action-link:hover,
.accordion-button:not(.collapsed)::after {
    background-color: var(--sts-primary) !important;
}

.bg-light-sts,
.bg-sts-sand,
.bg-light,
.section-soft,
.donation-form-wrapper,
.filter-card,
.faq-sidebar,
.auth-card,
.receipt-card,
.verification-card,
.policy-card,
.campaign-card,
.animal-card {
    background-color: var(--sts-surface-soft) !important;
}

.btn-primary,
.btn-warning,
.btn-home,
.btn-adopt-more,
.btn-action,
.btn-submit,
.btn-sts-primary,
.btn-sts,
.btn-donate,
.amount-btn.active,
.amount-btn:hover {
    background-color: var(--sts-primary) !important;
    border-color: var(--sts-primary) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(255, 138, 76, 0.24) !important;
}

.btn-primary:hover,
.btn-warning:hover,
.btn-home:hover,
.btn-adopt-more:hover,
.btn-action:hover,
.btn-submit:hover,
.btn-sts-primary:hover,
.btn-sts:hover,
.btn-donate:hover,
.back-to-top:hover {
    background-color: var(--sts-primary-hover) !important;
    border-color: var(--sts-primary-hover) !important;
    color: #fff !important;
}

.btn-outline-primary,
.btn-outline-custom,
.btn-sts-secondary,
.btn-outline-dark {
    background-color: transparent !important;
    border-color: var(--sts-primary) !important;
    color: var(--sts-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-custom:hover,
.btn-sts-secondary:hover,
.btn-outline-dark:hover {
    background-color: var(--sts-primary) !important;
    border-color: var(--sts-primary) !important;
    color: #fff !important;
}

.sticky-nav,
.navbar,
.navbar.sticky-nav {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--sts-border) !important;
    box-shadow: 0 10px 24px rgba(95, 102, 115, 0.06) !important;
}

.ppm-number,
.header-social-link {
    color: var(--sts-primary-dark) !important;
}

.header-social-link {
    border-color: var(--sts-border) !important;
    background: #fff !important;
}

.header-social-link:hover {
    color: #fff !important;
    background: var(--sts-primary) !important;
    border-color: var(--sts-primary) !important;
}

.nav-link.active::after {
    background: var(--sts-primary) !important;
}

.hero-overlay {
    background:
        linear-gradient(90deg, rgba(95, 102, 115, 0.82), rgba(95, 102, 115, 0.5)),
        linear-gradient(135deg, rgba(255, 138, 76, 0.42), rgba(255, 138, 76, 0.16)) !important;
}

.adopt-hero,
.volunteer-hero,
.faq-hero,
.policy-hero,
.lhdn-hero {
    background:
        linear-gradient(90deg, rgba(95, 102, 115, 0.84), rgba(95, 102, 115, 0.54)),
        linear-gradient(135deg, rgba(255, 138, 76, 0.48), rgba(255, 138, 76, 0.2)) !important;
}

.hero-content h1,
.hero-content h2,
.hero-content p,
.hero-content .lead,
.hero-content .hero-play-link {
    color: #fff !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.58) !important;
}

.hero-play-link:hover {
    color: var(--sts-primary-tint) !important;
}

.impact-section {
    color: #fff !important;
    box-shadow: 0 16px 36px rgba(255, 138, 76, 0.28) !important;
}

.expense-summary {
    background: var(--sts-primary) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.expense-summary h3,
.expense-summary h4,
.expense-summary p,
.expense-summary li {
    color: #fff !important;
}

.back-to-top,
.hero-play-icon,
.expense-summary,
.summary-card,
.lifecycle-step,
.form-card,
.dog-card,
.amount-option:hover,
.btn-check:checked + .dog-card,
.btn-check:checked + .amount-option,
.nav-pills .nav-link.active,
.nav-pills-custom .nav-link.active {
    box-shadow: 0 14px 32px rgba(255, 138, 76, 0.22) !important;
}

.form-card,
.dog-card,
.amount-option,
.pledge-panel,
.care-card,
.qr-box,
.lifecycle-step {
    border-color: var(--sts-border) !important;
}

.impact-section h2,
.impact-section p,
.stat-card h2,
.stat-card p,
.bg-sts-orange h1,
.bg-sts-orange h2,
.bg-sts-orange h3,
.bg-sts-orange h4,
.bg-sts-orange h5,
.bg-sts-orange p,
.bg-orange h1,
.bg-orange h2,
.bg-orange h3,
.bg-orange h4,
.bg-orange h5,
.bg-orange p {
    color: #fff !important;
}

.card,
.contact-card,
.info-card,
.animal-card,
.campaign-card,
.mission-card,
.feature-card,
.role-card,
.story-card,
.team-card,
.auth-card,
.receipt-card,
.verification-card,
.policy-card,
.faq-card,
.accordion-item {
    background: #fff !important;
    border-color: var(--sts-border) !important;
    box-shadow: 0 12px 32px rgba(95, 102, 115, 0.08) !important;
}

.card:hover,
.contact-card:hover,
.info-card:hover,
.animal-card:hover,
.campaign-card:hover,
.mission-card:hover,
.feature-card:hover,
.role-card:hover,
.story-card:hover {
    border-color: rgba(255, 138, 76, 0.48) !important;
    box-shadow: 0 18px 38px rgba(95, 102, 115, 0.12) !important;
}

.border-orange,
.border-primary,
.form-control:focus,
.form-select:focus,
.accordion-button:focus,
.amount-card:hover,
.amount-card.selected,
.pet-story-donation,
.notice-box {
    border-color: var(--sts-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 138, 76, 0.18) !important;
}

.progress,
.progress-stacked {
    background-color: #ffe3d3 !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--sts-primary), var(--sts-primary-hover)) !important;
}

.badge,
.badge.bg-light,
.badge.text-sts-dark,
.badge.text-sts-dark {
    border-color: var(--sts-border) !important;
}

.badge.bg-light,
.badge.text-sts-dark,
.badge.text-sts-dark {
    background-color: var(--sts-primary-soft) !important;
    color: var(--sts-primary-dark) !important;
}

.landing-footer {
    background: var(--sts-primary-dark) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border-top-color: var(--sts-primary) !important;
}

.landing-footer a,
.landing-footer .footer-brand-name,
.landing-footer .footer-section-title,
.landing-footer .bank-name {
    color: #fff !important;
}

.landing-footer a:hover,
.landing-footer .footer-action-link i {
    color: var(--sts-primary-tint) !important;
}

.landing-footer .footer-action-link,
.landing-footer .footer-social-link {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.form-check-input:checked {
    background-color: var(--sts-primary) !important;
    border-color: var(--sts-primary) !important;
}

.swal2-confirm.btn-primary {
    background-color: var(--sts-primary) !important;
    border-color: var(--sts-primary) !important;
}