/* ======================================================
   gradient.css — INBOX Telecommunication Brand Theme
   Primary Colors:
     Blue:   #015DA9
     Orange: #EF7F03
   
   Change these variables to update colors site-wide.
   ====================================================== */

:root {
    /* ===== Primary Brand Colors ===== */
    --primary-blue: #015DA9;
    --primary-orange: #EF7F03;

    /* Override template title colors to black */
    --sec-title-color: #000000;
    --headings-color: #000000;

    /* ===== Lighter / Darker Shades ===== */
    --primary-blue-light: #2a7fd4;
    --primary-blue-dark: #004a87;
    --primary-orange-light: #ffa033;
    --primary-orange-dark: #cc6600;

    /* ===== Soft / Pastel Palette ===== */
    --soft-blue: #EFF1F5;
    --soft-peach: #FFF4ED;
    --soft-snow: #F8FAFC;
    --dark-teal: #2F616B;
    --dark-navy: #0D1644;
    --deep-navy: #0A0F42;
    --soft-mint: #F7F8FA;
    --soft-sage: #F9FAFB;

    /* ===== Gradients ===== */
    --gradient-blue-orange: linear-gradient(135deg, #015DA9, #EF7F03);
    --gradient-orange-blue: linear-gradient(135deg, #EF7F03, #015DA9);
    --gradient-blue: linear-gradient(135deg, #015DA9, #2a7fd4);
    --gradient-orange: linear-gradient(135deg, #EF7F03, #ffa033);
    --gradient-blue-orange-horizontal: linear-gradient(90deg, #015DA9, #EF7F03);
    --gradient-orange-blue-horizontal: linear-gradient(90deg, #EF7F03, #015DA9);

    /* Soft gradients for section backgrounds */
    --gradient-soft-blue-snow: linear-gradient(180deg, #EFF1F5, #F8FAFC);
    --gradient-soft-mint-snow: linear-gradient(180deg, #F7F8FA, #F8FAFC);
    --gradient-soft-peach-snow: linear-gradient(180deg, #FFF4ED 0%, #F8FAFC 100%);
    --gradient-soft-sage-snow: linear-gradient(180deg, #F9FAFB, #F8FAFC);
    --gradient-navy-teal: linear-gradient(135deg, #0A0F42, #2F616B);
    --gradient-navy-deep: linear-gradient(135deg, #0D1644, #0A0F42);

    /* ===== Text / Background Helpers ===== */
    --text-on-blue: #ffffff;
    --text-on-orange: #000000;
    --text-on-dark: #ffffff;
    --text-on-soft: #1a1a2e;
}


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

/* Primary Backgrounds */
.bg-primary-blue {
    background-color: var(--primary-blue) !important;
}

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

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

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

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

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

/* Soft Backgrounds */
.bg-soft-blue {
    background-color: var(--soft-blue) !important;
}

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

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

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

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

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

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

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

/* Soft Gradient Backgrounds */
.bg-gradient-soft-blue {
    background: var(--gradient-soft-blue-snow) !important;
}

.bg-gradient-soft-mint {
    background: var(--gradient-soft-mint-snow) !important;
}

.bg-gradient-soft-peach {
    background: var(--gradient-soft-peach-snow) !important;
}

.bg-gradient-soft-sage {
    background: var(--gradient-soft-sage-snow) !important;
}

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

/* Text Colors */
.text-primary-blue {
    color: var(--primary-blue) !important;
}

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

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

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

/* Border Colors */
.border-primary-blue {
    border-color: var(--primary-blue) !important;
}

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

/* Buttons */
.btn-primary-blue {
    background-color: var(--primary-blue);
    color: var(--text-on-blue);
    border: none;
    transition: background-color 0.3s ease;
}

.btn-primary-blue:hover {
    background-color: var(--primary-blue-dark);
}

.btn-primary-orange {
    background-color: var(--primary-orange);
    color: var(--text-on-orange);
    border: none;
    transition: background-color 0.3s ease;
}

.btn-primary-orange:hover {
    background-color: var(--primary-orange-dark);
}

.btn-gradient {
    background: var(--gradient-blue-orange);
    color: #ffffff;
    border: none;
    transition: opacity 0.3s ease;
}

.btn-gradient:hover {
    opacity: 0.9;
}