/* ARSES Homepage — Base tokens & reset */

:root {
    --arses-green-900: #0d3b2e;
    --arses-green-800: #145a42;
    --arses-green-700: #1a7354;
    --arses-green-600: #228b63;
    --arses-mint: #b8e6cf;
    --arses-cream: #faf8f3;
    --arses-sand: #f0ebe3;
    --arses-card: rgba(255, 255, 255, 0.82);
    --arses-text: #1e3a32;
    --arses-muted: #5a7268;
    --arses-border: rgba(26, 115, 84, 0.12);
    --arses-shadow-sm: 0 2px 12px rgba(13, 59, 46, 0.06);
    --arses-shadow-md: 0 8px 32px rgba(13, 59, 46, 0.1);
    --arses-radius-lg: 16px;
    --arses-radius-xl: 24px;
    --arses-radius-2xl: 28px;

    --arses-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --arses-max-width: 1440px;
    --arses-transition: 0.25s ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.arses-home {
    margin: 0;
    font-family: var(--arses-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--arses-text);
    background: linear-gradient(180deg, var(--arses-cream) 0%, #ffffff 40%, var(--arses-sand) 100%);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--arses-green-700);
    text-decoration: none;
    transition: color var(--arses-transition);
}

a:hover {
    color: var(--arses-green-900);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--arses-green-600);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.arses-gradient.gradient-1 {
    background: linear-gradient(135deg, #b8e6cf 0%, #6bc49a 50%, #228b63 100%);
}

.arses-gradient.gradient-2 {
    background: linear-gradient(135deg, #e8dcc8 0%, #c4a882 50%, #8b6914 100%);
}

.arses-gradient.gradient-3 {
    background: linear-gradient(135deg, #d4f0e4 0%, #7ec8a8 50%, #1a7354 100%);
}

.arses-gradient.gradient-4 {
    background: linear-gradient(135deg, #fde8d4 0%, #e8b896 50%, #c4785a 100%);
}

.arses-gradient.gradient-5 {
    background: linear-gradient(135deg, #fff3c4 0%, #f0d878 50%, #d4a832 100%);
}

.arses-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    height: 1.35em;
    flex-shrink: 0;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--arses-green-700);
    background: rgba(184, 230, 207, 0.45);
    border-radius: 8px;
    line-height: 1;
}

.arses-icon--sparkle::after { content: "✦"; }
.arses-icon--heart::after { content: "♥"; }
.arses-icon--cart::after { content: "🛒"; font-size: 0.75em; }
.arses-icon--bell::after { content: "🔔"; font-size: 0.75em; }
.arses-icon--pin::after { content: "📍"; font-size: 0.75em; }
.arses-icon--store::after { content: "🏪"; font-size: 0.75em; }
.arses-icon--bag::after { content: "🛍"; font-size: 0.75em; }
.arses-icon--trending::after { content: "↑"; font-weight: 700; }
.arses-icon--search::after { content: "🔍"; font-size: 0.75em; }
.arses-icon--users::after { content: "👥"; font-size: 0.75em; }
.arses-icon--home::after { content: "🏠"; font-size: 0.75em; }
.arses-icon--clock::after { content: "⏱"; font-size: 0.75em; }
.arses-icon--leaf::after { content: "🌿"; font-size: 0.75em; }
.arses-icon--truck::after { content: "🚲"; font-size: 0.75em; }
.arses-icon--star::after { content: "★"; }
.arses-icon--chat::after { content: "💬"; font-size: 0.75em; }
.arses-icon--food::after { content: "🍃"; font-size: 0.75em; }
.arses-icon--art::after { content: "🎨"; font-size: 0.75em; }
.arses-icon--toy::after { content: "🧸"; font-size: 0.75em; }
.arses-icon--sport::after { content: "⚽"; font-size: 0.75em; }
.arses-icon--book::after { content: "📚"; font-size: 0.75em; }
.arses-icon--bike::after { content: "🚴"; font-size: 0.75em; }
.arses-icon--ev::after { content: "⚡"; }
.arses-icon--car::after { content: "🚗"; font-size: 0.75em; }
.arses-icon--fee::after { content: "$"; }
.arses-icon--ai::after { content: "AI"; font-size: 0.65em; }
.arses-icon--community::after { content: "🤝"; font-size: 0.75em; }
.arses-icon--lock::after { content: "🔒"; font-size: 0.75em; }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}