/* ==========================================================================
   Codeagle - WEBSITE THEME
   --------------------------------------------------------------------------
   The ONLY file with colour codes and font names for the website.
   To rebrand: change the values in section 1. Everything else (including
   all Bootstrap components) follows automatically.
   Admin > Settings > Appearance can also override these at runtime.
   ========================================================================== */

/* 1. Brand tokens ---------------------------------------------------------- */
:root {
    /* Brand colours: docs/Codeagle-Brand-Kit (tile blues + chevron orange) */
    --ce-primary: #2a52c9;
    --ce-primary-rgb: 42, 82, 201;
    --ce-primary-hover: #1f45a6;
    --ce-primary-active: #1a3a8f;
    --ce-primary-subtle: #eef3ff;
    --ce-primary-bright: #3d76ec;       /* top of the logo tile: glows, gradients, icons on dark */
    --ce-primary-bright-rgb: 61, 118, 236;

    --ce-secondary: #5f6b85;
    --ce-secondary-rgb: 95, 107, 133;

    --ce-accent: #f47a1f;
    --ce-accent-rgb: 244, 122, 31;
    --ce-accent-hover: #f0650e;
    --ce-accent-light: #ffa445;
    --ce-on-accent: #0f1a3d;        /* text on small accent badges (WCAG AA) */

    /* Main call-to-action buttons ("Get a Quote"): chevron gradient, white bold text */
    --ce-gradient-cta: linear-gradient(135deg, #ff8a2b 0%, #f0650e 55%, #dd5208 100%);
    --ce-gradient-cta-hover: linear-gradient(135deg, #ff9640 0%, #f4701a 55%, #e55a0c 100%);
    --ce-on-cta: #ffffff;
    --ce-cta-glow: 0 10px 22px -8px rgba(240, 101, 14, .65), inset 0 1px 0 rgba(255, 255, 255, .28);
    --ce-cta-glow-hover: 0 14px 28px -8px rgba(240, 101, 14, .75), inset 0 1px 0 rgba(255, 255, 255, .32);
    --ce-cta-text-shadow: 0 1px 1px rgba(122, 45, 0, .3);
    --ce-accent-on-dark: #ffa445;   /* accent icons on dark sections and the footer */

    /* Brand gradients (logo tile, chevron) */
    --ce-gradient-brand: linear-gradient(180deg, #3d76ec 0%, #1f45a6 40%, #0f1a3d 100%);
    --ce-gradient-brand-diagonal: linear-gradient(135deg, #0f1a3d 0%, #14275e 55%, #1f45a6 100%);
    --ce-gradient-accent: linear-gradient(135deg, #ffa445 0%, #f0650e 100%);
    --ce-gradient-line: linear-gradient(90deg, #3d75ea, #f47a1f);

    /* Neutrals (navy-tinted) */
    --ce-dark: #0f1a3d;
    --ce-dark-rgb: 15, 26, 61;
    --ce-darker: #0a1230;
    --ce-body-bg: #ffffff;
    --ce-body-color: #3a4560;
    --ce-heading-color: #0f1a3d;
    --ce-brand-text: #1a2f6e;
    --ce-muted: #5f6b85;
    --ce-section-alt-bg: #f5f7fb;
    --ce-border: #e3e9f7;

    /* Text on dark sections (stats band, CTA, footer) */
    --ce-on-dark: #ffffff;
    --ce-on-dark-muted: #c3cde6;
    --ce-on-dark-border: rgba(255, 255, 255, .12);
    --ce-on-dark-surface: rgba(255, 255, 255, .06);

    /* Header / footer */
    --ce-header-bg: #ffffff;
    --ce-footer-bg: #0a1230;
    --ce-footer-color: #c3cde6;
    --ce-footer-heading: #ffffff;
    --ce-footer-border: rgba(255, 255, 255, .1);

    /* Decorative swatches: placeholder thumbnails (portfolio, blog) & hero art */
    --ce-swatch-blue: #2a52c9;
    --ce-swatch-blue-2: #3d76ec;
    --ce-swatch-indigo: #1f45a6;
    --ce-swatch-indigo-2: #6f96f2;
    --ce-swatch-purple: #6d3fd1;
    --ce-swatch-purple-2: #a98bf0;
    --ce-swatch-teal: #0e8f86;
    --ce-swatch-teal-2: #3cc9b9;
    --ce-swatch-green: #16a34a;
    --ce-swatch-green-2: #4ade80;
    --ce-swatch-orange: #f0650e;
    --ce-swatch-orange-2: #ffa445;
    --ce-code-bg: #0f1a3d;
    --ce-code-line: rgba(255, 255, 255, .14);

    /* Third-party brand colours */
    --ce-whatsapp: #25d366;
    --ce-whatsapp-hover: #1ebe5a;
    --ce-star: #f5a524;

    /* Typography */
    --ce-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ce-font-heading: 'Poppins', 'Inter', system-ui, sans-serif;

    /* Shape (the logo is a soft rounded tile) */
    --ce-radius: .625rem;
    --ce-radius-lg: 1.25rem;
    --ce-shadow-sm: 0 1px 2px rgba(15, 26, 61, .06), 0 1px 3px rgba(15, 26, 61, .08);
    --ce-shadow: 0 12px 32px rgba(15, 26, 61, .09);
    --ce-shadow-lg: 0 24px 60px rgba(15, 26, 61, .16);
    --ce-shadow-brand: 0 18px 30px rgba(29, 64, 160, .35);
}

/* 2. Map tokens onto Bootstrap 5.3 (do not put colour codes below) -------- */
:root,
[data-bs-theme=light] {
    --bs-primary: var(--ce-primary);
    --bs-primary-rgb: var(--ce-primary-rgb);
    --bs-primary-bg-subtle: var(--ce-primary-subtle);
    --bs-primary-border-subtle: rgba(var(--ce-primary-rgb), .3);
    --bs-primary-text-emphasis: var(--ce-primary-active);
    --bs-secondary: var(--ce-secondary);
    --bs-secondary-rgb: var(--ce-secondary-rgb);
    --bs-dark: var(--ce-dark);
    --bs-dark-rgb: var(--ce-dark-rgb);

    --bs-body-font-family: var(--ce-font-body);
    --bs-body-color: var(--ce-body-color);
    --bs-body-bg: var(--ce-body-bg);
    --bs-emphasis-color: var(--ce-heading-color);
    --bs-secondary-color: var(--ce-muted);
    --bs-heading-color: var(--ce-heading-color);
    --bs-border-color: var(--ce-border);
    --bs-border-radius: var(--ce-radius);
    --bs-border-radius-lg: var(--ce-radius-lg);

    --bs-link-color: var(--ce-primary);
    --bs-link-color-rgb: var(--ce-primary-rgb);
    --bs-link-hover-color: var(--ce-primary-hover);
    --bs-link-hover-color-rgb: var(--ce-primary-rgb);
    --bs-focus-ring-color: rgba(var(--ce-primary-rgb), .25);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ce-font-heading);
}

.btn-primary {
    --bs-btn-bg: var(--ce-primary);
    --bs-btn-border-color: var(--ce-primary);
    --bs-btn-hover-bg: var(--ce-primary-hover);
    --bs-btn-hover-border-color: var(--ce-primary-hover);
    --bs-btn-active-bg: var(--ce-primary-active);
    --bs-btn-active-border-color: var(--ce-primary-active);
    --bs-btn-disabled-bg: var(--ce-primary);
    --bs-btn-disabled-border-color: var(--ce-primary);
    --bs-btn-focus-shadow-rgb: var(--ce-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ce-primary);
    --bs-btn-border-color: var(--ce-primary);
    --bs-btn-hover-bg: var(--ce-primary);
    --bs-btn-hover-border-color: var(--ce-primary);
    --bs-btn-active-bg: var(--ce-primary-active);
    --bs-btn-active-border-color: var(--ce-primary-active);
    --bs-btn-disabled-color: var(--ce-primary);
    --bs-btn-disabled-border-color: var(--ce-primary);
    --bs-btn-focus-shadow-rgb: var(--ce-primary-rgb);
}

.btn-accent {
    --bs-btn-color: var(--ce-on-accent);
    --bs-btn-bg: var(--ce-accent);
    --bs-btn-border-color: var(--ce-accent);
    --bs-btn-hover-color: var(--ce-on-accent);
    --bs-btn-hover-bg: var(--ce-accent-hover);
    --bs-btn-hover-border-color: var(--ce-accent-hover);
    --bs-btn-active-color: var(--ce-on-accent);
    --bs-btn-active-bg: var(--ce-accent-hover);
    --bs-btn-active-border-color: var(--ce-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--ce-accent-rgb);
}

.btn-dark {
    --bs-btn-bg: var(--ce-dark);
    --bs-btn-border-color: var(--ce-dark);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(var(--ce-primary-rgb), .5);
    box-shadow: 0 0 0 .25rem rgba(var(--ce-primary-rgb), .25);
}

.form-check-input:checked {
    background-color: var(--ce-primary);
    border-color: var(--ce-primary);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ce-primary);
}

.nav {
    --bs-nav-link-color: var(--ce-body-color);
    --bs-nav-link-hover-color: var(--ce-primary);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ce-primary);
    --bs-dropdown-link-hover-color: var(--ce-primary);
    --bs-dropdown-border-color: var(--ce-border);
}

.pagination {
    --bs-pagination-color: var(--ce-primary);
    --bs-pagination-hover-color: var(--ce-primary-hover);
    --bs-pagination-focus-color: var(--ce-primary-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--ce-primary-rgb), .25);
    --bs-pagination-active-bg: var(--ce-primary);
    --bs-pagination-active-border-color: var(--ce-primary);
}

.list-group {
    --bs-list-group-active-bg: var(--ce-primary);
    --bs-list-group-active-border-color: var(--ce-primary);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--ce-primary);
}

.accordion {
    --bs-accordion-active-color: var(--ce-primary-active);
    --bs-accordion-active-bg: var(--ce-primary-subtle);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--ce-primary-rgb), .25);
}

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