:root {
    --brand-cream: #fdfbf7;
    --brand-lime: #e3f988;
    --brand-tea: #cbf3d2;
    --brand-hunter: #1a4d2e;
    --brand-orange: #e86c35;
}

body {
    background-color: var(--brand-cream);
    color: var(--brand-hunter);
    font-family: "Quicksand", sans-serif;
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: "Lilita One", cursive;
}

.font-heading {
    font-family: "Jua", sans-serif;
}

/* Retro shadows */
.shadow-retro {
    box-shadow: 4px 4px 0px 0px var(--brand-hunter);
}

.shadow-retro-hover:hover {
    box-shadow: 2px 2px 0px 0px var(--brand-hunter);
    transform: translateY(-1px);
}

.shadow-retro-lg {
    box-shadow: 8px 8px 0px 0px var(--brand-hunter);
}

.bg-brand-cream { background-color: var(--brand-cream); }
.bg-brand-lime { background-color: var(--brand-lime); }
.bg-brand-tea { background-color: var(--brand-tea); }
.bg-brand-hunter { background-color: var(--brand-hunter); }
.bg-brand-orange { background-color: var(--brand-orange); }

.text-brand-hunter { color: var(--brand-hunter); }
.text-brand-orange { color: var(--brand-orange); }
.text-brand-cream { color: var(--brand-cream); }

.rounded-2xl { border-radius: 1.5rem; }
.rounded-3xl { border-radius: 2rem; }

.btn-brand-primary {
    background-color: var(--brand-orange);
    color: #fff;
    border: 2px solid var(--brand-hunter);
    box-shadow: 4px 4px 0px 0px var(--brand-hunter);
    font-family: "Jua", sans-serif;
    transition: all 0.2s ease;
    border-radius: 999px;
}
.btn-brand-primary:hover {
    box-shadow: 2px 2px 0px 0px var(--brand-hunter);
    transform: translateY(-1px);
    color: #fff;
    background-color: #d85c26;
}

.btn-brand-secondary {
    background-color: var(--brand-lime);
    color: var(--brand-hunter);
    border: 2px solid var(--brand-hunter);
    box-shadow: 4px 4px 0px 0px var(--brand-hunter);
    font-family: "Jua", sans-serif;
    transition: all 0.2s ease;
    border-radius: 999px;
}
.btn-brand-secondary:hover {
    box-shadow: 2px 2px 0px 0px var(--brand-hunter);
    transform: translateY(-1px);
    color: var(--brand-hunter);
}

.btn-brand-outline {
    background-color: transparent;
    color: var(--brand-hunter);
    border: 2px solid var(--brand-hunter);
    font-family: "Jua", sans-serif;
    border-radius: 999px;
    transition: all 0.2s ease;
}
.btn-brand-outline:hover {
    background-color: rgba(203, 243, 210, 0.4);
    color: var(--brand-hunter);
}

/* Hero background blobs */
.hero-blob-1,
.hero-blob-2 {
    position: absolute;
    border-radius: 999px;
    filter: blur(80px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}
.hero-blob-1 {
    width: 500px;
    height: 500px;
    background: var(--brand-tea);
    top: -80px;
    right: -150px;
}
.hero-blob-2 {
    width: 400px;
    height: 400px;
    background: var(--brand-lime);
    left: -150px;
    bottom: -60px;
    opacity: 0.4;
}

/* Custom input pill style */
.pill-input {
    height: 3.5rem;
    border-radius: 1.5rem;
    border: 2px solid transparent;
    background-color: var(--brand-cream);
    padding-left: 3rem;
    font-size: 1rem;
}
.pill-input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--brand-lime);
    background-color: var(--brand-cream);
}
.pill-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(26, 77, 46, 0.4);
}

/* Simple fake chart bars */
.chart-bar {
    flex: 1;
    border-radius: 999px;
    background: linear-gradient(to top, rgba(232,108,53,0.6), rgba(232,108,53,0.1));
}
.chart-bar-secondary {
    background: linear-gradient(to top, rgba(227,249,136,0.8), rgba(227,249,136,0.1));
}

/* Scrollbar (optional, WebKit only) */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #fdfbf7;
}
::-webkit-scrollbar-thumb {
    background: #cbf3d2;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e3f988;
}