/* =====================================================
   ROOT CSS - THEME VARIABLES & SYSTEM SETTINGS
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');

:root {
    /* Font Family */
    --font-family-base: 'Bubblegum Sans', cursive;

    /* Brand Theme Colors */
    --primary-color: #7667df;
    --primary-color-hover: #6354cc;
    --secondary-color: #f5a83b;
    --secondary-color-hover: #e09428;

    /* Accent Palette */
    --accent-pink: #ed4d78;
    --accent-green: #acd064;
    --accent-teal: #58c5a0;
    --accent-blue: #82c2d9;
    --accent-cyan: #21bad0;
    --accent-purple: #cf70d1;
    --accent-red: #ff5757;
    --accent-yellow: #ffd36b;
    --accent-orange: #ff6b00;
    --accent-dark-teal: #65c5b5;

    /* Light Accents */
    --accent-light-purple: #ad86cb;
    --accent-light-green: #c7e37c;
    --accent-tree-green: #d8e99a;
    --accent-soft-blue: #67b6df;

    /* Neutral & Background Colors */
    --white: #ffffff;
    --dark: #222222;
    --text-dark: #3f3f3f;
    --text-body: #555555;
    --text-muted: #777777;
    --text-light: #888888;
    --text-subtle: #999999;
    
    /* Backgrounds & Borders */
    --border-color: #eeeeee;
    --border-color-dark: #e5e5e5;
    --bg-light: #fafafa;
    --bg-card: #f5f5f5;
    --bg-soft-blue: #eef8fb;
    --bg-soft-blue-alt: #dcecf7;
    --bg-map-blue: #dceff5;

    /* Shadows */
    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.12);

    /* Border Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-custom: 0 15px 0 15px;

    /* Transitions */
    --transition-fast: all 0.25s ease;
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s ease;
}