/* ====================================================================== */
/*  SheriaPlex Core Theme – v2.0 (Dark-friendly, glass, gradient)         */
/* ====================================================================== */
/* 1.  Design tokens (CSS variables)                                      */
/* 2.  Bootstrap variable overrides                                       */
/* 3.  Base / typography / motion                                         */
/* 4.  Layout: navbar, buttons, cards, footer                             */
/* 5.  Utilities (glass, shadows, dark-mode)                              */
/* ====================================================================== */

/* ---------------------------------------------------------------------- */
/* 1 Design tokens                                                        */
/* ---------------------------------------------------------------------- */
:root {
    /* brand */
    --sp-primary-h: 216; /* base hue: blue */
    --sp-primary: #004aad;
    --sp-primary-light: hsl(var(--sp-primary-h) 100% 70%);
    --sp-accent: #73c2fb;
    /* gradients & glass */
    --sp-grad-primary: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    --sp-grad-accent: linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);
    --sp-glass: rgba(255,255,255,0.12);
    --sp-glass-hover: rgba(255,255,255,0.20);
    /* greys */
    --sp-dark: #0b132b;
    --sp-gray: #6c757d;
    --sp-light: #f8f9fa;
    /* radius / shadows */
    --sp-radius: .5rem;
    --sp-radius-lg: 1rem;
    --sp-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.05);
    --sp-shadow-md: 0 .25rem 1rem rgba(0,0,0,.10);
    --sp-shadow-glass: 0 8px 32px rgba(31,38,135,.37);
    font-size: 16px;
    font-family: 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
:root {
    color-scheme: light;
}
/* force browser widgets to be light */
html, body {
    background: #fff;
}
/* guarantee a white canvas */
/* ---------------------------------------------------------------------- */
/* 2 Bootstrap overrides                                                  */
/* ---------------------------------------------------------------------- */
.btn-primary,
.navbar-brand,
.link-primary {
    --bs-btn-bg: var(--sp-primary);
    --bs-btn-border-color: var(--sp-primary);
    --bs-btn-hover-bg: var(--sp-accent);
    --bs-btn-hover-border-color: var(--sp-accent);
    --bs-btn-focus-shadow-rgb: 0,0,0; /* remove blue glow */
}

/* ---------------------------------------------------------------------- */
/* 3 Base / typography / motion                                           */
/* ---------------------------------------------------------------------- */
body {
    background: var(--sp-light);
    color: var(--sp-dark);
    line-height: 1.55;
}

*, ::before, ::after {
    transition: background-color .2s,color .2s,border-color .2s;
}

@media (prefers-reduced-motion:reduce) {
    *, ::before, ::after {
        transition: none !important
    }
}

/* ---------------------------------------------------------------------- */
/* 4 Layout components                                                    */
/* ---------------------------------------------------------------------- */

/* === Navbar === */
.navbar {
    background: var(--sp-primary);
    box-shadow: 0 1px 6px rgba(0,0,0,.1);
    backdrop-filter: blur(12px); /* glass effect */
}

.navbar-brand,
.navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        color: var(--sp-accent) !important;
    }

.navbar-toggler {
    border: 0
}

.sticky-top.navbar {
    box-shadow: 0 1px 8px rgba(0,0,0,.15)
}

@media(max-width:991.98px) {
    .navbar-nav .nav-link {
        padding: .5rem 1rem;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }
}

/* === Buttons === */
.btn, .btn-sm, .btn-lg {
    border-radius: var(--sp-radius);
    font-weight: 500;
}

.btn-outline-primary {
    color: var(--sp-primary);
    border-color: var(--sp-primary);
}

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

/* Gradient primary button utility */
.btn-gradient {
    background: var(--sp-grad-primary);
    border: 0;
    color: #fff;
}

    .btn-gradient:hover {
        filter: brightness(1.05)
    }

/* === Cards === */
.card {
    border: 0;
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-md);
    background: var(--sp-glass);
    backdrop-filter: blur(20px);
}

.card-title {
    font-weight: 600
}

/* === Hero / utilities === */
.section-pad {
    padding: 5rem 0
}

.section-dark {
    background: var(--sp-dark);
    color: #fff;
}

.text-accent {
    color: var(--sp-accent) !important
}

/* === Footer === */
footer {
    background: #111;
    color: #bbb;
}

    footer a {
        color: #bbb;
        text-decoration: none;
    }

        footer a:hover {
            color: #fff
        }

    footer h6 {
        font-size: .875rem;
        color: #fff;
        margin-bottom: 1rem;
        font-weight: 600;
    }

    footer .form-control {
        border-radius: var(--sp-radius) 0 0 var(--sp-radius);
        border: 0;
    }

    footer .btn-primary {
        border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
    }

/* ---------------------------------------------------------------------- */
/* 5 Utility helpers                                                      */
/* ---------------------------------------------------------------------- */

/* Glass container utility */
.glass {
    background: var(--sp-glass);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-glass);
}

    .glass:hover {
        background: var(--sp-glass-hover)
    }

/* Shadows */
.shadow-sm {
    box-shadow: var(--sp-shadow-sm) !important
}

.shadow-md {
    box-shadow: var(--sp-shadow-md) !important
}

/* Smooth gradient text helper */
.text-gradient {
    background: var(--sp-grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===== Ensure login button visible on navbar ===== */
header.navbar .btn-outline-primary {
    color: #fff !important;
    border-color: #fff !important;
    background-color: transparent !important;
}

    header.navbar .btn-outline-primary:hover,
    header.navbar .btn-outline-primary:focus {
        color: var(--sp-primary) !important;
        background-color: #fff !important;
        border-color: #fff !important;
    }

/* ---------------------------------------------------------------------- */
/*  End of file                                                           */
/* ---------------------------------------------------------------------- */