:root {
    /* Color Palette Design Tokens */
    --color-blue-50: #ebf7fc;
    --color-blue-75: #addff4;
    --color-blue-100: #8cd2f0;
    --color-blue-200: #5abee9;
    --color-blue-300: #38b1e5;
    --color-blue-400: #277ca0;
    --color-blue-500: #226c8c;

    --color-orange-50: #fef2eb;
    --color-orange-75: #fccbac;
    --color-orange-100: #fab589;
    --color-orange-200: #f89557;
    --color-orange-300: #f77f34;
    --color-orange-400: #ad5924;
    --color-orange-500: #974d20;

    /* Theme Semantic Mapping */
    --theme-bg: #ffffff;
    --theme-text-primary: var(--color-blue-500);
    --theme-text-secondary: var(--color-blue-400);
    --theme-text-accent: var(--color-orange-500);
    --theme-accent: var(--color-orange-100);

    /* Typography Design Tokens */
    --font-primary: 'DM Sans', 'Inter', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body {
    background-color: var(--theme-bg);
    color: var(--theme-text-primary);
    font-family: var(--font-primary);
}

/* Hero Halo Gradient */
.halo-gradient {
    background: radial-gradient(circle, var(--color-blue-50) 32%, var(--color-orange-75) 64%, var(--color-blue-100));
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-blue-400);
    border-radius: 9999px;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* WhatsApp Bubble Pattern Effect */
.wa-chat-bg {
    background-color: #efeae2;
    background-image: radial-gradient(var(--color-blue-500) 0.5px, transparent 0.5px);
    background-size: 12px 12px;
    opacity: 0.95;
}

/* Fallback & Custom Color Utility Classes */
.bg-parchment {
    background-color: var(--theme-bg);
}

.bg-paperWhite {
    background-color: #ffffff;
}

.bg-forestInk {
    background-color: var(--color-blue-500);
}

.bg-lichenGray {
    background-color: var(--color-blue-400);
}

.bg-meadow {
    background-color: var(--color-orange-100);
}

.bg-deepForest {
    background-color: var(--color-orange-500);
}

.bg-deepTeal {
    background-color: var(--color-blue-400);
}

.bg-mintSurface {
    background-color: var(--color-blue-50);
}

.bg-limeSurface {
    background-color: var(--color-orange-50);
}

.bg-lavenderSurface {
    background-color: var(--color-blue-75);
}

.bg-blushSurface {
    background-color: var(--color-orange-75);
}

.bg-buttercream {
    background-color: var(--color-blue-100);
}

.bg-sageGlow {
    background-color: var(--color-orange-50);
}

.bg-petal {
    background-color: var(--color-orange-75);
}

.bg-waGreen {
    background-color: #25D366;
}

.bg-waDark {
    background-color: #075E54;
}

.text-parchment {
    color: var(--theme-bg);
}

.text-paperWhite {
    color: #ffffff;
}

.text-forestInk {
    color: var(--color-blue-500);
}

.text-lichenGray {
    color: var(--color-blue-400);
}

.text-stone {
    color: var(--color-orange-400);
}

.text-slate {
    color: var(--color-blue-400);
}

.text-mist {
    color: var(--color-blue-300);
}

.text-meadow {
    color: var(--color-orange-100);
}

.text-deepForest {
    color: var(--color-orange-500);
}

.text-deepTeal {
    color: var(--color-blue-400);
}

.text-waGreen {
    color: #25D366;
}

.text-waDark {
    color: #075E54;
}

.border-forestInk\/10 {
    border-color: rgba(34, 108, 140, 0.1);
}

.border-forestInk\/15 {
    border-color: rgba(34, 108, 140, 0.15);
}

.border-forestInk\/20 {
    border-color: rgba(34, 108, 140, 0.2);
}

/* Sticky Floating Pill Navbar */
#main-header {
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 100;
    display: flex;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent;
}

#navbar-container {
    width: 90%;
    max-width: 1000px;
    height: 64px;
    border-radius: 9999px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(34, 108, 140, 0.1);
    box-shadow: 0 8px 32px rgba(34, 108, 140, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Adjust default nav items for dark header */
#main-header #brand-logo #logo-text {
    color: var(--theme-text-primary);
}

#main-header #desktop-nav a {
    color: var(--theme-text-secondary);
}

#main-header #desktop-nav a:hover {
    color: var(--theme-text-primary);
}

#main-header #mobileMenuBtn {
    color: var(--theme-text-primary);
}

/* Scrolled floating pill state */
#main-header.scrolled {
    position: fixed;
    top: 12px;
}

#main-header.scrolled #navbar-container {
    max-width: 900px;
    height: 58px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(34, 108, 140, 0.15);
    box-shadow: 0 10px 30px rgba(34, 108, 140, 0.1);
}

/* Adjusted text colors for scrolled pill state */
#main-header.scrolled #brand-logo #logo-text {
    color: var(--theme-text-primary);
}

#main-header.scrolled #desktop-nav a {
    color: var(--theme-text-secondary);
}

#main-header.scrolled #desktop-nav a:hover {
    color: var(--theme-text-primary);
}

#main-header.scrolled #mobileMenuBtn {
    color: var(--theme-text-primary);
}

/* Force rounded-full buttons globally */
#app-body .rounded-button {
    border-radius: 9999px;
}

/* Force super-rounded corners for cards */
#app-body .rounded-card {
    border-radius: 32px;
}

/* Dynamic Headline Word Transition */
#dynamic-category {
    display: inline-block;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(0);
    opacity: 1;
}

/* Micro-interaction Float Animation */
.animate-float {
    animation: float-bob 3s ease-in-out infinite;
}

@keyframes float-bob {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Scroll Reveal Interactivity Motion */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }