/* App Global Custom Styles */

/* ========================================
   Brand Colors - CSS Custom Properties
   ======================================== */
:root {
    /* Primary Brand Colors (user specified) */
    --brand-light-blue: #02bdf7;
    --brand-light-blue-hover: #029ed1;
    --brand-dark-blue: #0c001f;
    --brand-purple: #6200ee;
    --brand-blue: #004aad;
    --brand-blue-300: #5486c8;
    --brand-grey: #cfcfcf;

    /* Extended Brand Colors (derived from design) */
    --brand-navy: #0C2343;
    --brand-gradient-purple: #5D5FEF;
    --brand-gradient-cyan: #3CBFF0;
    --brand-gradient-cyan-alt: #3BBCED;
    --brand-deep-purple: #4600A9;
    --brand-primary-blue: #2F55D4;
    --brand-green: #16A155;
    --brand-green-hover: #138e4c;
    --brand-light-grey: #F0F0F0;
    --brand-hero-card-bg: #E8F3FB;

    /* Gradient Definitions */
    --brand-gradient-primary: linear-gradient(to right, var(--brand-gradient-purple) 16%, var(--brand-gradient-cyan) 72%);
    --brand-gradient-border: linear-gradient(to right, var(--brand-gradient-cyan-alt), #78559D);
    --brand-gradient-divider: linear-gradient(to bottom, var(--brand-gradient-purple) 34%, var(--brand-gradient-cyan) 77%);
    --brand-gradient-cta-border: linear-gradient(to right, var(--brand-gradient-purple) 9%, var(--brand-gradient-cyan) 50%, rgba(22, 161, 85, 0.8) 88%);
}

/* ========================================
   Text Color Utilities
   ======================================== */
.text-light-blue { color: var(--brand-light-blue) !important; }
.text-dark-blue { color: var(--brand-dark-blue) !important; }
.text-purple { color: var(--brand-purple) !important; }
.text-blue { color: var(--brand-blue) !important; }
.text-blue-300 { color: var(--brand-blue-300) !important; }
.text-grey { color: var(--brand-grey) !important; }
.text-navy { color: var(--brand-navy) !important; }
.text-deep-purple { color: var(--brand-deep-purple) !important; }
.text-primary-blue { color: var(--brand-primary-blue) !important; }
.text-green { color: var(--brand-green) !important; }
.text-gradient-purple { color: var(--brand-gradient-purple) !important; }
.text-gradient-cyan { color: var(--brand-gradient-cyan) !important; }

/* Gradient Text */
.text-gradient-primary {
    background: var(--brand-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   Background Color Utilities
   ======================================== */
.bg-light-blue { background-color: var(--brand-light-blue) !important; }
.bg-dark-blue { background-color: var(--brand-dark-blue) !important; }
.bg-purple { background-color: var(--brand-purple) !important; }
.bg-blue { background-color: var(--brand-blue) !important; }
.bg-blue-300 { background-color: var(--brand-blue-300) !important; }
.bg-grey { background-color: var(--brand-grey) !important; }
.bg-light-grey { background-color: var(--brand-light-grey) !important; }
.bg-navy { background-color: var(--brand-navy) !important; }
.bg-deep-purple { background-color: var(--brand-deep-purple) !important; }
.bg-primary-blue { background-color: var(--brand-primary-blue) !important; }
.bg-green { background-color: var(--brand-green) !important; }
.bg-hero-card { background-color: var(--brand-hero-card-bg) !important; }
.bg-white { background-color: #FFFFFF !important; }

/* Gradient Backgrounds */
.bg-gradient-primary { background: var(--brand-gradient-primary) !important; }
.bg-gradient-border { background: var(--brand-gradient-border) !important; }
.bg-gradient-divider { background: var(--brand-gradient-divider) !important; }
.bg-gradient-cta-border { background: var(--brand-gradient-cta-border) !important; }

/* ========================================
   Border Color Utilities
   ======================================== */
.border-light-blue { border-color: var(--brand-light-blue) !important; }
.border-dark-blue { border-color: var(--brand-dark-blue) !important; }
.border-purple { border-color: var(--brand-purple) !important; }
.border-blue { border-color: var(--brand-blue) !important; }
.border-blue-300 { border-color: var(--brand-blue-300) !important; }
.border-grey { border-color: var(--brand-grey) !important; }
.border-navy { border-color: var(--brand-navy) !important; }
.border-green { border-color: var(--brand-green) !important; }
.border-gradient-cyan { border-color: var(--brand-gradient-cyan) !important; }

/* ========================================
   Font Weight Utilities
   ======================================== */
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

/* ========================================
   Letter Spacing Utilities
   ======================================== */
.ls-tight { letter-spacing: -0.02em !important; }
.ls-tighter { letter-spacing: -0.04em !important; }
.ls-normal { letter-spacing: 0 !important; }
.ls-wide { letter-spacing: 0.02em !important; }
.ls-wider { letter-spacing: 0.04em !important; }

/* ========================================
   Line Height Utilities
   ======================================== */
.lh-1 { line-height: 1 !important; }
.lh-tight { line-height: 1.1 !important; }
.lh-snug { line-height: 1.25 !important; }
.lh-normal { line-height: 1.5 !important; }
.lh-relaxed { line-height: 1.625 !important; }
.lh-loose { line-height: 2 !important; }


/* ========================================
   WhatsApp Icon Styles
   ======================================== */
@property --whatsapp-color-1 {
    syntax: '<color>';
    initial-value: #0B8F21;
    inherits: false;
}

@property --whatsapp-color-2 {
    syntax: '<color>';
    initial-value: #0B8F21;
    inherits: false;
}

.whatsapp-icon {
    position: fixed;
    bottom: 10vh;
    right: 5vw;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--whatsapp-color-1) 0%, var(--whatsapp-color-2) 100%);
    border-radius: 50%;
    padding: 16px;
    transition: --whatsapp-color-1 0.3s, --whatsapp-color-2 0.3s, box-shadow 0.3s;
    text-decoration: none;
}

.whatsapp-icon:hover {
    --whatsapp-color-1: #0B8F21;
    --whatsapp-color-2: #032909;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.whatsapp-icon img {
    width: 40px;
    height: 40px;
}

/* ========================================
   General Utility Classes
   ======================================== */

section[id] {
    scroll-margin-top: 80px;
}

.gx-10 {
    --bs-gutter-x: 10rem;
}

.container {
    max-width: 85%;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1500px;
    }
}