/*
 * ============================================
 * LIKOD THEME - EASY COLOR CUSTOMIZATION
 * ============================================
 * 
 * To change the color scheme, simply modify
 * the CSS variables below. The entire site
 * will update automatically.
 * 
 * Color suggestions:
 * - Orange/Red theme:  --primary: #FF6B35;
 * - Blue theme:        --primary: #0066FF;
 * - Green theme:       --primary: #00A86B;
 * - Purple theme:      --primary: #7C3AED;
 * - Pink theme:        --primary: #EC4899;
 */

:root {
    /* ===== PRIMARY COLORS ===== */
    --primary: #1AABA4;           /* Tropical teal */
    --primary-hover: #148983;
    --primary-light: #DDF6F4;
    --primary-subtle: #F1FBFA;

    /* ===== SECONDARY COLORS ===== */
    --secondary: #264653;         /* Deep sea blue */
    --secondary-hover: #1B333D;
    --secondary-light: #5C7983;

    /* ===== ACCENT COLORS ===== */
    --accent: #F4A261;            /* Soft sunset peach */
    --accent-hover: #DD8B4B;

    /* ===== NATURE COLORS ===== */
    --nature: #7CB518;            /* Palm leaf green */
    --nature-hover: #5F8C11;
    --nature-light: #EEF8D8;

    /* ===== STATUS COLORS ===== */
    --success: #2A9D8F;
    --success-light: #DDF6F1;

    --warning: #E9C46A;
    --warning-light: #FFF7DD;

    --danger: #E76F51;
    --danger-light: #FCE6E1;

    --info: #4EA8DE;
    --info-light: #E6F5FD;

    /* ===== NEUTRAL COLORS ===== */
    --white: #FFFFFF;

    --gray-50: #FAFBFB;
    --gray-100: #F4F6F6;
    --gray-200: #E5E9EA;
    --gray-300: #D2D9DB;
    --gray-400: #9AA7AC;
    --gray-500: #6F7E84;
    --gray-600: #4F5C61;
    --gray-700: #394449;
    --gray-800: #253136;
    --gray-900: #162024;

    --black: #000000;

    /* ===== TEXT COLORS ===== */
    --text-primary: #253136;
    --text-secondary: #66757B;
    --text-light: #98A6AB;
    --text-inverse: #FFFFFF;

    /* ===== BACKGROUND COLORS ===== */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F7FBFB;
    --bg-dark: #1B2D35;

    /* ===== BORDER COLORS ===== */
    --border-light: #E2E8EA;
    --border-medium: #C9D2D5;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);

    --shadow-md:
        0 6px 12px rgba(0,0,0,0.08);

    --shadow-lg:
        0 14px 28px rgba(0,0,0,0.10);

    --shadow-xl:
        0 20px 40px rgba(0,0,0,0.14);

    /* ===== GRADIENTS ===== */
    --gradient-primary:
        linear-gradient(
            135deg,
            #1AABA4 0%,
            #43C6AC 100%
        );

    --gradient-hero:
        linear-gradient(
            135deg,
            #264653 0%,
            #1AABA4 45%,
            #F4A261 100%
        );

    --gradient-sunset:
        linear-gradient(
            135deg,
            #F4A261 0%,
            #E9C46A 100%
        );

    --gradient-nature:
        linear-gradient(
            135deg,
            #7CB518 0%,
            #AACC00 100%
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #1B2D35 0%,
            #101A1F 100%
        );

    /* ===== TYPOGRAPHY ===== */
    --font-family-base:
        'Poppins',
        'Inter',
        sans-serif;

    --font-family-heading:
        'Poppins',
        sans-serif;

    /* ===== SPACING ===== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 350ms ease;
}

/* ===== BOOTSTRAP OVERRIDES ===== */
/* These override Bootstrap's default colors with our theme */

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-subtle {
    background-color: var(--primary-subtle) !important;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-primary:active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.text-primary {
    color: var(--primary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.link-primary {
    color: var(--primary);
}

.link-primary:hover {
    color: var(--primary-hover);
}

/* Warning/Accent colors */
.text-warning {
    color: var(--accent) !important;
}

.bg-warning {
    background-color: var(--accent) !important;
}

.btn-warning {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-primary);
}

.btn-warning:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Success colors */
.bg-success {
    background-color: var(--success) !important;
}

.text-success {
    color: var(--success) !important;
}

/* Danger colors */
.bg-danger {
    background-color: var(--danger) !important;
}

.text-danger {
    color: var(--danger) !important;
}

/* Info colors */
.bg-info {
    background-color: var(--info) !important;
}

/* Custom utility classes */
.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

.bg-gradient-hero {
    background: var(--gradient-hero) !important;
}