/* ============================================================
   Light theme system — loaded on every public page, for every theme.

   Each theme file (public/css/themes/{key}.css) sets only tokens:
     --page --surface --tint --line          backgrounds and hairlines
     --ink --ink-soft                        brand ink, secondary text
     --accent --accent-text --accent-head    accent: raw / small text / headline
     --btn --on-btn                          solid buttons
     fonts, radii, heading/nav/button casing
   This file turns those tokens into the site: light page and heroes, white
   surfaces, hairline borders, ink buttons with white text, the accent only
   in fine touches, and a dark ink footer as the one dark anchor.

   style.css and cinematic.css still describe layout; this file only
   restyles colour, type and surfaces, so switching themes never moves
   anything on the page. The admin panel does not load it.
   ============================================================ */

:root {
    /* style.css reads these names — map them onto the theme tokens */
    --navy: var(--ink);
    --navy-mid: var(--ink);
    --navy-dark: var(--ink);
    --gold: var(--accent-head);
    --gold-dark: var(--accent-text);
    --light: var(--tint);
    --dark: var(--ink);
    --gray: var(--ink-soft);
    --gray-light: var(--line);
    --white: #fff;
    --ink-deep: color-mix(in srgb, var(--ink) 82%, #000);
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05);
    --shadow-hover: 0 2px 4px rgba(16,24,40,.05), 0 14px 34px rgba(16,24,40,.09);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--page);
    --bs-link-color: var(--ink);
    --bs-link-hover-color: var(--accent-text);
}

body { background: var(--page); color: color-mix(in srgb, var(--ink) 88%, #000); font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6,
.section-header h2, .hero-heading, .cta-content h2, .product-detail-title {
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    text-transform: var(--heading-case);
    letter-spacing: var(--heading-track);
    color: var(--ink);
}
.bg-light { background-color: var(--tint) !important; }
.bg-white { background-color: var(--surface) !important; }
.text-navy { color: var(--ink) !important; }
.text-muted { color: var(--ink-soft) !important; }

/* ---- Buttons: one system ---- */
.btn-hero-primary, .btn-cta-primary, .btn-primary-cta, .btn-call-sm, .btn-enquiry-submit, .nav-cta {
    text-transform: var(--btn-case); letter-spacing: var(--btn-track);
}
.btn-hero-primary, .btn-cta-primary, .btn-primary-cta, .btn-call-sm, .btn-enquiry-submit {
    background: var(--btn); color: var(--on-btn); border: 1px solid var(--btn); border-radius: var(--btn-radius);
}
.btn-hero-primary:hover, .btn-cta-primary:hover, .btn-primary-cta:hover, .btn-call-sm:hover,
.btn-enquiry-submit:hover, .btn-enquiry-submit:focus-visible {
    background: color-mix(in srgb, var(--btn) 84%, #000); border-color: color-mix(in srgb, var(--btn) 84%, #000); color: var(--on-btn);
}
.btn-enquiry-submit { border-radius: min(var(--btn-radius), 12px); }
.btn-hero-outline, .btn-cta-call {
    background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--btn-radius);
    text-transform: var(--btn-case); letter-spacing: var(--btn-track);
}
.btn-hero-outline:hover, .btn-cta-call:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-hero-wa, .btn-cta-wa, .btn-wa-footer, .btn-whatsapp-sm, .float-whatsapp { border-radius: var(--btn-radius); }
.btn-primary {
    --bs-btn-bg: var(--btn); --bs-btn-border-color: var(--btn); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ink-deep); --bs-btn-hover-border-color: var(--ink-deep);
    --bs-btn-active-bg: var(--ink-deep); --bs-btn-active-border-color: var(--ink-deep);
}
.btn-outline-primary {
    --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink); --bs-btn-active-color: #fff;
    background: var(--surface);
}
.btn-outline-primary.active { color: #fff; }
.pagination { --bs-pagination-color: var(--ink); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-border-color: var(--ink);
              --bs-pagination-border-color: var(--line); --bs-pagination-hover-bg: var(--tint); }
.form-control, .form-select, .input-group-text { border-color: var(--line); }
.form-control:focus, .form-select:focus {
    border-color: color-mix(in srgb, var(--ink) 45%, #fff);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ink) 12%, transparent);
}

/* ---- Top bar + navbar ---- */
.top-bar { background: var(--surface); color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.top-bar a, .top-bar .text-white { color: var(--ink-soft) !important; }
.top-bar a:hover { color: var(--ink) !important; }
.main-navbar { background: var(--surface); box-shadow: none; border-bottom: 1px solid var(--line); }
.main-navbar.scrolled { box-shadow: 0 6px 24px rgba(16,24,40,.06); }
.main-navbar .nav-link { color: var(--ink-soft); text-transform: var(--nav-case); letter-spacing: var(--nav-track); font-size: var(--nav-size); }
.main-navbar .nav-link:hover, .main-navbar .nav-link.active { color: var(--ink); }
.main-navbar .nav-link::after { background: var(--accent-head); height: 1px; }
.nav-cta { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink); border-radius: var(--btn-radius) !important; }
.nav-cta:hover { background: var(--ink) !important; color: #fff !important; }
.brand-name { color: var(--ink); }
.brand-sub  { color: var(--accent-text); }
.dropdown-menu { border: 1px solid var(--line); box-shadow: var(--shadow-hover); }
.dropdown-item:hover { background: var(--tint); color: var(--ink); }

/* ---- Home hero (cutout stage stays; the room turns light) ---- */
.hero-section { background: var(--page); color: var(--ink); }
.hero-bg { background-image: radial-gradient(55% 70% at 82% 35%, var(--tint) 0%, transparent 70%); }
.hero-overlay {
    background: linear-gradient(100deg,
        var(--page) 0%, color-mix(in srgb, var(--page) 94%, transparent) 36%,
        color-mix(in srgb, var(--page) 35%, transparent) 64%, transparent 100%);
}
@media (max-width: 991px) {
    .hero-overlay { background: linear-gradient(180deg, color-mix(in srgb, var(--page) 96%, transparent),
                                                        color-mix(in srgb, var(--page) 88%, transparent)); }
}
.hero-floor { background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(16,24,40,.07) 0%, transparent 70%); }
.hero-glow  { background: radial-gradient(ellipse 46% 62% at 62% 34%, var(--tint) 0%, transparent 68%); }
.hero-heading { color: var(--ink); }
.hero-accent  { color: var(--accent-head); }
.hero-sub     { color: var(--ink-soft); }
.hero-badge   { background: var(--surface); border: 1px solid var(--line); color: var(--accent-text); border-radius: var(--btn-radius); }
.stat-box     { background: var(--surface); border: 1px solid var(--line); }
.stat-num     { color: var(--ink); font-family: var(--heading-font); }
.stat-label   { color: var(--ink-soft); }
.hero-scroll-hint { color: var(--ink-soft); }
.hero-form-wrap .enquiry-card, .sticky-top .enquiry-card { box-shadow: var(--shadow-hover); }

/* ---- Inner page + landing heroes ---- */
.page-hero, .landing-hero {
    background: var(--page);
    background-image: radial-gradient(50% 120% at 85% 0%, var(--tint) 0%, transparent 70%);
    color: var(--ink); border-bottom: 1px solid var(--line);
}
.page-hero p, .landing-hero p { color: var(--ink-soft); }
.breadcrumb-item a { color: var(--ink-soft); }
.breadcrumb-item.active { color: var(--accent-text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--line); }
.lp-trust-pill { background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); border-radius: var(--btn-radius); }
.lp-trust-pill i { color: var(--accent-text); }
.lp-stat-num   { color: var(--ink); font-family: var(--heading-font); }
.lp-stat-label { color: var(--ink-soft); }

/* ---- Trust strip, marquee ---- */
.trust-bar { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-item { color: var(--ink-soft); }
.trust-item i { color: var(--accent-text); }
.trust-divider { background: var(--line); }
.logo-marquee { background: var(--tint); }
.marquee-viewport { border-color: var(--line); }

/* ---- Section labels: a quiet eyebrow, not a pill ---- */
.section-tag {
    background: none; color: var(--accent-text); padding: 0; border-radius: 0;
    font-size: .72rem; letter-spacing: .2em;
}
.section-header h2 { color: var(--ink); }
.section-header p  { color: var(--ink-soft); }

/* ---- Cards ---- */
.category-card, .product-card, .why-card, .blog-card, .fact-card, .testimonial-card, .about-fact-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none;
}
.category-card:hover, .product-card:hover, .why-card:hover, .blog-card:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); box-shadow: var(--shadow-hover); }
.cat-icon-wrap { background: var(--tint); color: var(--ink); }
.product-img { background: var(--tint); }
.product-cat-badge { background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); border: 1px solid var(--line); border-radius: var(--btn-radius); }
.moq-badge { background: var(--tint); color: var(--accent-text); border-radius: var(--btn-radius); }
.industry-icon { background: var(--tint) !important; color: var(--ink) !important; }
.industry-item strong { color: var(--ink); }
.industry-cta-card { background: var(--surface) !important; border: 1px solid var(--line); color: var(--ink); }
.industry-cta-card h5 { color: var(--ink); }
.industry-cta-card p, .industry-cta-card small { color: var(--ink-soft) !important; }
.industry-cta-card i { color: var(--accent-text); }
.why-card h5 { color: var(--ink); }
.product-specs { background: var(--tint); }

/* ---- Former dark bands ---- */
.testimonials-section { background: var(--tint); }
.testimonials-section h2 { color: var(--ink); }
.testimonials-section p { color: var(--ink-soft); }
.testimonials-section .section-tag { background: none; color: var(--accent-text); }
.testi-quote { color: var(--ink-soft); }
.testi-author strong { color: var(--ink); }
.testi-author span { color: var(--ink-soft); }
.testi-avatar { background: var(--tint); color: var(--ink); }
.fact-num   { color: var(--ink); font-family: var(--heading-font); }
.fact-label { color: var(--ink-soft); }
.cta-section { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-content h2 { color: var(--ink); }
.cta-content p  { color: var(--ink-soft); }
.section-navy, .section-navy.fabric-texture { background: var(--tint); color: var(--ink); }
.section-navy h2, .section-navy h3, .section-navy h4 { color: var(--ink); }
/* Industry panels are photographs: keep white text on an ink scrim over the photo. */
.industry-panel h3, .industry-panel p { color: #fff; }
.industry-panel::after {
    background: linear-gradient(0deg, color-mix(in srgb, var(--ink-deep) 82%, transparent) 0%,
                color-mix(in srgb, var(--ink-deep) 22%, transparent) 60%, transparent 100%);
}
.industry-panel .panel-index { color: #fff; opacity: .8; }
.ind-dots { background: color-mix(in srgb, var(--ink-deep) 40%, transparent); }
.ind-dot.on { background: #fff; border-color: #fff; }

/* ---- Enquiry card ---- */
.enquiry-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.enquiry-header h3 { color: var(--ink); font-family: var(--heading-font); font-weight: var(--heading-weight); }
.enquiry-header p { color: var(--ink-soft); }
.enquiry-card .form-check-label a { color: var(--ink); }

/* ---- Footer: the one dark anchor ---- */
.site-footer { background: var(--ink-deep); }
.footer-bottom { background: color-mix(in srgb, var(--ink-deep) 78%, #000); }
.footer-brand-name { font-family: var(--heading-font); }
.footer-brand-sub { color: color-mix(in srgb, var(--accent) 70%, #fff); }
.footer-links li a:hover { color: #fff; }

/* ---- Floating + sticky ---- */
.float-call { background: var(--ink); box-shadow: var(--shadow-hover); }
.float-call:hover { background: var(--ink-deep); }
.btn-factory-tour { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-hover); }
.btn-factory-tour:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-factory-tour i { color: var(--accent-text); }
.mobile-cta-bar { background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(16,24,40,.06); }
.mobile-cta-bar .mcb-quote { background: var(--btn); color: var(--on-btn); }
.skip-link { background: var(--ink); }