:root {
    --jc-blue: #174485;
    --jc-graphite: #515255;
    --jc-navy: #0C184C;
    --jc-charcoal: #161832;
    --jc-grey-100: #FFFFFF;
    --jc-grey-200: #F5F6F8; /* optional UI background */
    --jc-grey-400: #ACB1C9;
    --jc-grey-500: #9799A4;
    --jc-grey-700: #646E99;
    --jc-grey-900: #21242E;
    --jc-text: #161832;
    --jc-border: #E3E6EC; /* optional */
}

/* Simple utility classes */
.bg-jc-blue {
    background: var(--jc-blue) !important;
}

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

.bg-jc-graphite {
    background: var(--jc-graphite) !important;
}

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

.btn-jc {
    background: var(--jc-blue);
    border-color: var(--jc-blue);
    color: #fff;
}

    .btn-jc:hover {
        background: var(--jc-navy);
        border-color: var(--jc-navy);
        color: #fff;
    }

.btn-jc-outline {
    background: transparent;
    border: 2px solid var(--jc-blue);
    color: var(--jc-blue);
}

    .btn-jc-outline:hover {
        background: var(--jc-blue);
        color: #fff;
    }