/* Scouts Panel - Adventurous & Outdoorsy Theme */
/* Forest green, khaki, energetic youth feel */

/* ============================================
   GOOGLE FONT IMPORT
   Baloo 2 - fun, energetic rounded sans
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&display=swap');

/* ============================================
   COLOR & FONT VARIABLES
   ============================================ */

:root {
    /* Backgrounds */
    --niche-bg: #f6f7f4;
    --niche-bg-accent: #ecefe8;
    --niche-cream: #fafbf9;

    /* Primary (scout green) */
    --niche-primary: #15803d;
    --niche-primary-dark: #166534;
    --niche-primary-light: #22c55e;
    --niche-primary-rgb: 21, 128, 61;

    /* Accent (khaki/tan) */
    --niche-accent: #a16207;
    --niche-accent-light: #ca8a04;

    /* Sidebar (forest) */
    --niche-sidebar-bg: #166534;
    --niche-sidebar-dark: #14532d;

    /* Text & Border */
    --niche-text: #1c1917;
    --niche-border: #d6d3d1;
    --niche-border-rgb: 214, 211, 209;

    /* Typography - Baloo 2 for fun, energetic feel (headings only) */
    --niche-font-heading: 'Baloo 2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================
   SCOUTS-SPECIFIC: Subtle outdoor pattern
   ============================================ */

.fi-body {
    background:
        url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2315803d' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--niche-bg) 0%, var(--niche-bg-accent) 100%) !important;
    background-attachment: fixed !important;
}

/* ============================================
   SCOUTS-SPECIFIC: Compass/tent pattern on sidebar
   ============================================ */

.fi-sidebar {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ca8a04' stroke-opacity='0.07' stroke-width='1'%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3Cpath d='M30 14v8M30 38v8M14 30h8M38 30h8'/%3E%3Cpath d='M20.5 20.5l5 5M34.5 34.5l5 5M20.5 39.5l5-5M34.5 25.5l5-5'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--niche-sidebar-bg) 0%, var(--niche-sidebar-dark) 100%) !important;
    border-right: 3px solid var(--niche-accent) !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15) !important;
}