:root {
    --lagoon:   #0ABFBC;
    --ocean:    #1E90C8;
    --foam:     #D0F4F2;
    --deepsea:  #063D5E;
    --gold:     #FFD166;
    --sunset:   #F4A261;
    --sand:     #F0E6C8;
    --palm:     #52B788;
    --clearing: #DDF0D8;
}

/* --- Base --- */
body {
    background-color: #ffffff;
    color: var(--deepsea);
}

/* --- Layout --- */
.container { max-width: 1000px !important; }

/* --- Navbar --- */
.navbar {
    background-color: #2a7fa8 !important;
    box-shadow: 0 2px 12px rgba(6,61,94,0.12) !important;
}
.navbar-brand, .nav-link { color: white !important; }
.nav-link:hover { color: var(--gold) !important; opacity: 1; }
.navbar-brand:hover { color: var(--gold) !important; }
.navbar-nav .nav-item { margin: 0 6px; }

/* --- Buttons --- */
.btn-primary {
    background: linear-gradient(135deg, var(--lagoon) 0%, var(--ocean) 100%);
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(135deg, var(--ocean) 0%, var(--deepsea) 100%);
    border: none;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10,191,188,0.35);
}
.btn-outline-primary { color: var(--lagoon); border-color: var(--lagoon); border-radius: 8px; font-weight: 500; }
.btn-outline-primary:hover { background-color: var(--lagoon); border-color: var(--lagoon); color: white; }
.btn-check:checked + .btn-outline-primary { background: linear-gradient(135deg, var(--lagoon) 0%, var(--ocean) 100%); border-color: var(--lagoon); color: white; }

/* --- Cards --- */
.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(6,61,94,0.08);
    margin-bottom: 1rem;
    background-color: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
    box-shadow: 0 8px 28px rgba(6,61,94,0.14);
    transform: translateY(-2px);
}

/* --- Badges --- */
.badge-news        { background: linear-gradient(135deg, var(--lagoon), var(--ocean)); color: white; }
.badge-discussion  { background-color: #9b59b6; color: white; }
.badge-recommendation { background-color: var(--gold); color: #7A4B00; }
.badge-lost_found  { background-color: var(--sunset); color: #7A3800; }
.badge-other       { background-color: #95a5a6; color: white; }

/* --- Footer --- */
footer {
    background: linear-gradient(135deg, var(--ocean) 0%, var(--deepsea) 100%);
    color: white;
}
footer a { color: rgba(255,255,255,0.75); }
footer a:hover { color: var(--gold); }

/* --- Avatar --- */
.avatar-circle {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--lagoon), var(--ocean));
    color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1.1rem;
}

/* --- Misc --- */
.neighborhood-badge { background-color: var(--foam); color: var(--deepsea); border-radius: 999px; }
.text-primary { color: var(--lagoon) !important; }
a { color: var(--lagoon); text-decoration: none; }
a:hover { color: var(--ocean); text-decoration: none; }

/* --- Alerts --- */
.alert-success { background-color: var(--clearing); border-color: var(--palm); color: #1a4a2e; }
.alert-info    { background-color: var(--foam); border-color: var(--lagoon); color: var(--deepsea); }

/* --- Lucide icon alignment --- */
[data-lucide] { vertical-align: -0.125em; }