/*  ============================================
    Tree Harmony – Light Mode Palette
    Base CSS variables for the light mode theme.
    All page-specific CSS files should reference
    these variables for consistent theming.
    ============================================  */

:root {
    /* ---- Backgrounds ---- */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;

    /* ---- Navigation & Footer ---- */
    --nav-bar: #0CAEB1;
    --footer-bg: #1A5F78;
    --footer-text: #FFFFFF;

    /* ---- Buttons ---- */
    --btn-primary: #617DC6;
    --btn-primary-hover: #4F6AB5;
    --btn-primary-text: #FFFFFF;

    --btn-secondary: #8CA1D7;
    --btn-secondary-hover: #7A90C6;
    --btn-secondary-text: #FFFFFF;

    --btn-accept: #C3F796;
    --btn-accept-hover: #A8E076;
    --btn-accept-text: #1A5F78;

    /* ---- Cards ---- */
    --card-primary: #8CA1D7;
    --card-secondary: #8896BC;
    --card-tertiary: #707A93;
    --card-primary-text: #FFFFFF;
    --card-secondary-text: #FFFFFF;
    --card-tertiary-text: #FFFFFF;

    /* ---- Typography ---- */
    --heading-color: #1A5F78;
    --text-primary: #333333;
    --text-secondary: #6B7280;
    --text-light: #FFFFFF;

    /* ---- Accents ---- */
    --accent-teal: #0CAEB1;
    --accent-dark-teal: #1A5F78;
    --accent-blue-purple: #617DC6;
    --accent-lavender: #8CA1D7;

    /* ---- Forms & Inputs ---- */
    --input-bg: #FFFFFF;
    --input-border: #D1D5DB;
    --input-focus-border: #0CAEB1;
    --input-text: #333333;
    --input-placeholder: #9CA3AF;

    /* ---- Borders & Shadows ---- */
    --border-color: #E5E7EB;
    --border-primary: #D1D5DB;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
}