/* ============================================================
   Dabotek custom skin — overrides theme.css
   Loaded AFTER /css/theme.css in Master.cshtml (line ~520).
   Edit tokens in :root; do not touch theme.css (vendor bundle).
   ============================================================ */

/* ---------- 1. Design tokens ----------
   HSL triples mirror the shadcn token block from the Lovable mockup
   (https://dabotek-bolt-builder.lovable.app). Bootstrap --bs-* vars
   resolve to the same colors via hsl(). Tweak the HSL triples to
   restyle everything downstream.
*/
:root {
    /* Raw HSL triples from Lovable (shadcn convention: "H S% L%") */
    --db-primary-hsl:              230 100% 40%;
    --db-primary-foreground-hsl:   0 0% 100%;
    --db-background-hsl:           210 20% 98%;
    --db-foreground-hsl:           220 30% 12%;
    --db-card-hsl:                 0 0% 100%;
    --db-card-foreground-hsl:      220 30% 12%;
    --db-secondary-hsl:            210 25% 93%;
    --db-muted-hsl:                210 20% 95%;
    --db-muted-foreground-hsl:     220 10% 46%;
    --db-accent-hsl:               230 80% 55%;
    --db-border-hsl:               220 15% 88%;
    --db-navy-hsl:                 225 50% 15%;
    --db-navy-foreground-hsl:      210 30% 92%;
    --db-radius:                   0.5rem;

    /* Bootstrap / Cartzilla overrides (inherited by .btn, .bg-primary, etc.) */
    --bs-primary:             hsl(var(--db-primary-hsl));
    --bs-primary-rgb:         0, 34, 204;    /* precomputed from hsl(230 100% 40%) — keep in sync */
    --bs-secondary:           hsl(var(--db-secondary-hsl));
    --bs-body-bg:             hsl(var(--db-background-hsl));
    --bs-body-color:          hsl(var(--db-foreground-hsl));
    --bs-body-font-family:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-border-radius:       var(--db-radius);
    --bs-border-color:        hsl(var(--db-border-hsl));

    /* Dabotek-scoped (used by rules below, not by Bootstrap core) */
    --db-navbar-bg:           hsl(var(--db-card-hsl));
    --db-navbar-fg:           hsl(var(--db-foreground-hsl));
    --db-hero-bg:             hsl(var(--db-muted-hsl));
    --db-hero-fg:             hsl(var(--db-foreground-hsl));
    --db-card-bg:             hsl(var(--db-card-hsl));
    --db-card-shadow:         0 1px 3px hsl(var(--db-foreground-hsl) / 0.08);
    --db-footer-bg:           hsl(var(--db-navy-hsl));
    --db-footer-fg:           hsl(var(--db-navy-foreground-hsl));
    --db-accent:              hsl(var(--db-accent-hsl));
}

/* ---------- 2. Global typography ---------- */
body {
    font-family: var(--bs-body-font-family);
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--bs-body-font-family);
    font-weight: 600;
}

/* ---------- 3. Navbar
   Targets: inline navbar in Master.cshtml lines ~600-1100.
*/
.navbar-sticky.bg-light {
    background-color: var(--db-navbar-bg) !important;
}

.navbar.navbar-light .nav-link {
    color: var(--db-navbar-fg);
    font-weight: 500;
}

.navbar.navbar-light .nav-link:hover,
.navbar.navbar-light .nav-link.active {
    color: var(--bs-primary);
}

.navbar-tool-icon-box {
    background-color: transparent;
    border-radius: var(--bs-border-radius);
}

.navbar-tool-label {
    background-color: var(--bs-primary);
}

/* ---------- 4. Hero / banner carousel
   Targets: Home.cshtml:65-82 (.tns-carousel > .tns-carousel-inner > div > .rounded-3).
*/
.tns-carousel.mb-3.mb-md-5 .rounded-3 {
    background: var(--db-hero-bg);
    color: var(--db-hero-fg);
    border-radius: var(--bs-border-radius) !important;
    padding-block: 3.5rem;
}

.tns-carousel h1,
.tns-carousel .h1 {
    font-size: clamp(1.75rem, 3vw, 3rem);
}

/* ---------- 5. Product card
   Targets: Home.cshtml:130, NOTO_ProductGroup.cshtml:196,
   NOTO_ProductSearch.cshtml:283 — all .card.product-card.card-static.
*/
.card.product-card {
    background-color: var(--db-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--db-card-shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card.product-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.card.product-card .product-title a {
    color: var(--bs-body-color);
}

.card.product-card .product-title a:hover {
    color: var(--bs-primary);
}

.card.product-card .product-meta {
    color: var(--db-accent);
}

.card.product-card .text-accent {
    color: var(--bs-primary) !important;
}

/* ---------- 6. Buttons
   Cartzilla's theme.css is Bootstrap 5.1 (no component-level --bs-btn-*
   tokens), and defines .btn-primary with explicit colors across every
   state including :hover/:focus/:active/:disabled. Override each state
   directly. Lovable's CTA dims via opacity on hover (not color darken).
*/
.btn {
    border-radius: var(--bs-border-radius);
    font-weight: 600;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-check:focus + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle,
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: hsl(var(--db-primary-foreground-hsl));
    box-shadow: none;
}

.btn-primary {
    border-radius: calc(var(--db-radius) - 2px);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    opacity: 0.9;
}

.btn-primary:active,
.btn-primary.active {
    opacity: 0.85;
}

.btn-primary:disabled,
.btn-primary.disabled {
    opacity: 0.55;
}

.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: hsl(var(--db-primary-foreground-hsl));
}

.btn-shadow {
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), 0.25);
}

/* theme.css sets .text-primary / .text-accent with !important;
   match specificity so Cartzilla's coral #fe696a no longer wins. */
.text-primary {
    color: var(--bs-primary) !important;
}

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

/* ---------- 7. Footer
   Targets: inline footer in Master.cshtml:~1295+ AND the
   duplicate Partials/Default/Footer.cshtml (both .footer.bg-dark).
*/
.footer.bg-dark {
    background-color: var(--db-footer-bg) !important;
    color: var(--db-footer-fg);
}

.footer .widget-title.text-light {
    color: var(--db-footer-fg) !important;
}

.footer .widget-list-link {
    color: color-mix(in srgb, var(--db-footer-fg) 70%, transparent);
}

.footer .widget-list-link:hover {
    color: var(--bs-primary);
}

.footer .bg-darker {
    background-color: color-mix(in srgb, var(--db-footer-bg) 85%, #000);
}

/* ---------- 8. Body background neutraliser
   Master.cshtml:528 sets <body class="bg-secondary"> which would
   otherwise override --bs-body-bg. Drop this rule if the mockup
   intentionally uses a gray body.
*/
body.bg-secondary {
    background-color: var(--bs-body-bg) !important;
}