/* LaunchYourKid Brand Colors - Official Palette */
/* Based on the actual LaunchYourKid.com website colors */

:root {
    /* Primary Brand Colors */
    --lyk-teal: #6ec3c3;          /* Main teal/aqua blue */
    --lyk-pink: #f94d9b;          /* Bright pink */
    --lyk-green: #8dd14c;         /* Lime green for Payments & Accounting */

    /* Secondary Colors */
    --lyk-purple: #9b59b6;        /* Purple for headings and accents */
    --lyk-purple-dark: #6b23b0;   /* Dark purple for links */
    --lyk-yellow: #f1c40f;        /* Yellow/gold */
    --lyk-light-blue: #3498db;    /* Light blue */

    /* Neutral Colors */
    --lyk-white: #ffffff;         /* Pure white */
    --lyk-light-gray: #f7f7f7;    /* Light gray background */
    --lyk-gray: #95a5a6;          /* Medium gray */
    --lyk-dark-gray: #555555;     /* Dark gray text */
    --lyk-black: #2c3e50;         /* Soft black */

    /* Functional Colors (kid-friendly versions) */
    --lyk-success: #8dd14c;       /* Using brand green */
    --lyk-warning: #f39c12;       /* Softer orange */
    --lyk-danger: #e74c3c;        /* Softer red */
    --lyk-info: #3498db;          /* Light blue */

    /* Hover/Active States */
    --lyk-teal-hover: #5eb3b3;    /* Darker teal */
    --lyk-teal-active: #4ea3a3;   /* Even darker teal */
    --lyk-pink-hover: #e73d8b;    /* Darker pink */
    --lyk-pink-active: #d72d7b;   /* Even darker pink */
    --lyk-green-hover: #7dc13c;   /* Darker green */
    --lyk-green-active: #6db12c;  /* Even darker green */
    --lyk-purple-hover: #7c29c5;  /* Darker purple */
    --lyk-purple-active: #6b23b0; /* Even darker purple */
    --lyk-purple-dark-hover: #4a1780; /* Darker link purple */
    
    /* Text on Brand Colors */
    --lyk-text-on-teal: #ffffff;  /* White text on teal */
    --lyk-text-on-pink: #ffffff;  /* White text on pink */
    --lyk-text-on-green: #ffffff; /* White text on green */
    
    /* Gradients */
    --lyk-gradient-primary: linear-gradient(135deg, var(--lyk-teal) 0%, var(--lyk-pink) 100%);
    --lyk-gradient-playful: linear-gradient(135deg, var(--lyk-pink) 0%, var(--lyk-green) 50%, var(--lyk-teal) 100%);
    
    /* Shadows */
    --lyk-shadow-sm: 0 0.125rem 0.25rem rgba(110, 195, 195, 0.2);
    --lyk-shadow-md: 0 0.25rem 0.5rem rgba(110, 195, 195, 0.25);
    --lyk-shadow-lg: 0 0.5rem 1rem rgba(110, 195, 195, 0.3);
}

/* Utility Classes for Brand Colors */
.bg-lyk-teal { background-color: var(--lyk-teal) !important; }
.bg-lyk-pink { background-color: var(--lyk-pink) !important; }
.bg-lyk-green { background-color: var(--lyk-green) !important; }
.bg-lyk-purple { background-color: var(--lyk-purple) !important; }
.bg-lyk-yellow { background-color: var(--lyk-yellow) !important; }

.text-lyk-teal { color: var(--lyk-teal) !important; }
.text-lyk-pink { color: var(--lyk-pink) !important; }
.text-lyk-green { color: var(--lyk-green) !important; }
.text-lyk-purple { color: var(--lyk-purple-dark) !important; } /* Using darker purple for better readability */
.text-lyk-yellow { color: var(--lyk-yellow) !important; }

/* Brand Buttons */
.btn-lyk-teal {
    background-color: var(--lyk-teal);
    border-color: var(--lyk-teal);
    color: var(--lyk-text-on-teal);
}
.btn-lyk-teal:hover {
    background-color: var(--lyk-teal-hover);
    border-color: var(--lyk-teal-hover);
}

.btn-lyk-pink {
    background-color: var(--lyk-pink);
    border-color: var(--lyk-pink);
    color: var(--lyk-text-on-pink);
}
.btn-lyk-pink:hover {
    background-color: var(--lyk-pink-hover);
    border-color: var(--lyk-pink-hover);
}

.btn-lyk-green {
    background-color: var(--lyk-green);
    border-color: var(--lyk-green);
    color: var(--lyk-text-on-green);
}
.btn-lyk-green:hover {
    background-color: var(--lyk-green-hover);
    border-color: var(--lyk-green-hover);
}

.btn-lyk-purple {
    background-color: var(--lyk-purple);
    border-color: var(--lyk-purple);
    color: #ffffff;
}
.btn-lyk-purple:hover {
    background-color: var(--lyk-purple-hover);
    border-color: var(--lyk-purple-hover);
}

.btn-lyk-purple-dark {
    background-color: var(--lyk-purple-dark);
    border-color: var(--lyk-purple-dark);
    color: #ffffff;
}
.btn-lyk-purple-dark:hover {
    background-color: var(--lyk-purple-dark-hover);
    border-color: var(--lyk-purple-dark-hover);
}

/* Brand Gradient Backgrounds */
.bg-lyk-gradient {
    background: var(--lyk-gradient-primary);
}

.bg-lyk-gradient-playful {
    background: var(--lyk-gradient-playful);
}

/* Brand Badges */
.badge-lyk-teal {
    background-color: var(--lyk-teal);
    color: var(--lyk-text-on-teal);
}

.badge-lyk-pink {
    background-color: var(--lyk-pink);
    color: var(--lyk-text-on-pink);
}

.badge-lyk-green {
    background-color: var(--lyk-green);
    color: var(--lyk-text-on-green);
}

.badge-lyk-purple {
    background-color: var(--lyk-purple);
    color: #ffffff;
}

.badge-lyk-purple-dark {
    background-color: var(--lyk-purple-dark);
    color: #ffffff;
}

/* Icon Circle for Dashboard Cards */
.icon-circle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 1.125rem;
}