/*!
 * Piiply Custom Theme
 * Brand colors and styles for Piiply landing page
 */

/* Root color variables - Light Mode */
:root {
    /* Primary brand colors */
    --dc-primary: #4741a6;
    --dc-primary-light: #6b63c7;
    --dc-primary-lighter: #8f87d8;
    --dc-primary-dark: #3a3485;
    --dc-primary-darker: #2d2764;

    /* Secondary & Accent colors */
    --dc-secondary: #9bbbfc;
    --dc-accent: #f9ce69;
    --dc-neutral: #d9eff7;

    /* Status colors */
    --dc-success: #047857;
    --dc-warning: #d97706;
    --dc-danger: #b91c1c;
    --dc-info: #3b82f6;

    /* Override Bootstrap primary */
    --bs-primary: #4741a6;
    --bs-primary-rgb: 71, 65, 166;
}

/* Dark Mode color adjustments */
[data-bs-theme="dark"] {
    --dc-primary: #6b63c7;
    --bs-primary: #6b63c7;
    --bs-primary-rgb: 107, 99, 199;
}

/* Body background color */
body {
    background-color: #ffffff;
}

[data-bs-theme="dark"] body {
    background-color: #0f172a;
}

/* Navbar background color */
.navbar-custom {
    background-color: #f8f9fa;
}

[data-bs-theme="dark"] .navbar-custom {
    background-color: #0f172a;
}

/* Navbar text colors for light mode */
.navbar-custom.navbar-dark .nav-link {
    color: rgba(33, 37, 41, 0.75);
}

.navbar-custom.navbar-dark .nav-link:hover,
.navbar-custom.navbar-dark .nav-link:focus {
    color: #212529;
}

.navbar-custom.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-custom.navbar-dark .navbar-toggler {
    border-color: rgba(33, 37, 41, 0.1);
}

[data-bs-theme="dark"] .navbar-custom.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.75);
}

[data-bs-theme="dark"] .navbar-custom.navbar-dark .nav-link:hover,
[data-bs-theme="dark"] .navbar-custom.navbar-dark .nav-link:focus {
    color: #ffffff;
}

[data-bs-theme="dark"] .navbar-custom.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .navbar-custom.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Card background color */
.card-custom {
    background-color: #ffffff;
}

[data-bs-theme="dark"] .card-custom {
    background-color: #1e293b;
}

/* Dark background sections */
.bg-custom-dark {
    background-color: #f8f9fa;
    color: #212529;
}

[data-bs-theme="dark"] .bg-custom-dark {
    background-color: #0f172a;
    color: #ffffff;
}

/* Tertiary background sections */
.bg-custom-tertiary {
    background-color: #f8f9fa;
}

[data-bs-theme="dark"] .bg-custom-tertiary {
    background-color: #1e293b;
}

/* Text color adjustments for light mode */
.bg-custom-dark .text-white {
    color: #212529 !important;
}

[data-bs-theme="dark"] .bg-custom-dark .text-white {
    color: #ffffff !important;
}

.bg-custom-dark .text-white-50 {
    color: rgba(33, 37, 41, 0.6) !important;
}

[data-bs-theme="dark"] .bg-custom-dark .text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.bg-custom-dark .link-light {
    color: #4741a6 !important;
}

[data-bs-theme="dark"] .bg-custom-dark .link-light {
    color: #dee2e6 !important;
}

.bg-custom-dark .btn-outline-light {
    color: #4741a6;
    border-color: #4741a6;
}

.bg-custom-dark .btn-outline-light:hover {
    background-color: #4741a6;
    border-color: #4741a6;
    color: #ffffff;
}

[data-bs-theme="dark"] .bg-custom-dark .btn-outline-light {
    color: #f8f9fa;
    border-color: #f8f9fa;
}

[data-bs-theme="dark"] .bg-custom-dark .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #f8f9fa;
    color: #ffffff;
}

/* Primary button styling */
.btn-primary {
    background-color: var(--dc-primary);
    border-color: var(--dc-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--dc-primary-dark);
    border-color: var(--dc-primary-dark);
}

.btn-primary:active {
    background-color: var(--dc-primary-darker) !important;
    border-color: var(--dc-primary-darker) !important;
}

/* Outline button styling */
.btn-outline-primary {
    color: var(--dc-primary);
    border-color: var(--dc-primary);
}

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

/* Links */
a {
    color: var(--dc-primary);
    text-decoration: none;
}

a:hover {
    color: var(--dc-primary-dark);
    text-decoration: none;
}

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

/* Background colors */
.bg-primary {
    background-color: var(--dc-primary) !important;
}

/* Badge styling */
.badge.bg-primary {
    background-color: var(--dc-primary) !important;
}

/* Feature boxes */
.feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 4rem;
    font-size: 2rem;
}

/* Navbar brand hover effect */
.navbar-brand:hover {
    opacity: 0.8;
}

/* Navbar button alignment */
.navbar-nav .btn {
    display: inline-flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Icons with primary color */
.bi.text-primary {
    color: var(--dc-primary) !important;
}

/* Accordion custom styling */
.accordion-button:not(.collapsed) {
    background-color: rgba(71, 65, 166, 0.1);
    color: var(--dc-primary);
}

.accordion-button:focus {
    border-color: var(--dc-primary);
    box-shadow: 0 0 0 0.25rem rgba(71, 65, 166, 0.25);
}

/* Card hover effects */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-4px);
}

/* Dark mode specific adjustments */
[data-bs-theme="dark"] .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(107, 99, 199, 0.15);
}

/* Footer link hover */
.link-light:hover {
    color: var(--dc-accent) !important;
}