/* Site-wide light / dark theme.
   html[data-theme] is set before first paint by assets/js/rl-theme.js.
   Tokens below are the shared palette — page stylesheets should use them in
   their own html[data-theme="dark"] blocks instead of new hard-coded colors.
   Loaded last in <head>, after page CSS, so these overrides win ties. */

:root {
    --rl-bg: #ffffff;
    --rl-bg-alt: #F5F7FA;
    --rl-surface: #ffffff;
    --rl-surface-2: #F5F7FA;
    --rl-surface-3: #e9ecef;
    --rl-line: #e3e6ea;
    --rl-line-strong: #d9dce1;
    --rl-text: #252930;
    --rl-text-muted: #5d6168;
    --rl-text-faint: #8a8f98;
    --rl-heading: #252930;
    --rl-link: #063F5B;
    --rl-link-hover: #0a5a82;
    --rl-accent: #063F5B;
    --rl-accent-bright: #4DA8DA;
    --rl-input-bg: #ffffff;
    --rl-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .08);
}

html[data-theme="dark"] {
    --rl-bg: #050608;
    --rl-bg-alt: #0b0d10;
    --rl-surface: #111317;
    --rl-surface-2: #181b21;
    --rl-surface-3: #22262d;
    --rl-line: rgba(255, 255, 255, .09);
    --rl-line-strong: rgba(255, 255, 255, .16);
    --rl-text: rgba(244, 246, 248, .86);
    --rl-text-muted: rgba(244, 246, 248, .62);
    --rl-text-faint: rgba(244, 246, 248, .42);
    --rl-heading: #f4f6f8;
    --rl-link: #4DA8DA;
    --rl-link-hover: #7cc2e8;
    --rl-accent: #4DA8DA;
    --rl-accent-bright: #4DA8DA;
    --rl-input-bg: #0e1014;
    --rl-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45);
    /* #063F5B disappears into the near-black page; a lifted brand blue keeps white text legible */
    --rl-btn-primary: #1f6f99;
    --rl-btn-primary-hover: #2a83b3;

    /* rli.css's shared "dev" palette (eyebrows, hero copy, feature blocks) */
    --rl-dev-accent: #4DA8DA;
    --rl-dev-accent-soft: rgba(77, 168, 218, .16);
    --rl-dev-ink: var(--rl-heading);
    --rl-dev-ink-2: var(--rl-text);
    --rl-dev-muted: var(--rl-text-muted);
    --rl-dev-line: var(--rl-line);
    --rl-dev-bg: var(--rl-surface);
    --rl-dev-bg-soft: var(--rl-surface-2);
    --rl-dev-grid: rgba(255, 255, 255, .05);

    /* Bootstrap 5.0 reads a handful of these */
    --bs-body-color: var(--rl-text);
    --bs-body-bg: var(--rl-bg);
    color-scheme: dark;
    background: var(--rl-bg);
}

/* ---- Theme toggle (header) ---------------------------------------------- */
.rl-theme-toggle { cursor: pointer; line-height: 1; }
.rl-theme-toggle__icon--light { display: none; }
html[data-theme="dark"] .rl-theme-toggle__icon--dark { display: none; }
html[data-theme="dark"] .rl-theme-toggle__icon--light { display: inline; }

/* ======================================================================== */
/* Dark overrides                                                           */
/* ======================================================================== */

/* ---- Base ---------------------------------------------------------------- */
html[data-theme="dark"] body { background-color: var(--rl-bg); color: var(--rl-text); }
html[data-theme="dark"] h1, html[data-theme="dark"] .h1,
html[data-theme="dark"] h2, html[data-theme="dark"] .h2,
html[data-theme="dark"] h3, html[data-theme="dark"] .h3,
html[data-theme="dark"] h4, html[data-theme="dark"] .h4,
html[data-theme="dark"] h5, html[data-theme="dark"] .h5,
html[data-theme="dark"] h6, html[data-theme="dark"] .h6,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .theme-text-primary { color: var(--rl-heading); }
/* :where() keeps this at element+attribute weight: it beats the template's
   bare `a { color }` but lets component rules (cards/buttons built on <a>) win. */
html[data-theme="dark"] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)) { color: var(--rl-link); }
html[data-theme="dark"] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)):hover { color: var(--rl-link-hover); }
/* whole-card links: body copy keeps text colour, only the "more" link is blue */
html[data-theme="dark"] a.post-link,
html[data-theme="dark"] a.post-link:hover { color: var(--rl-text); }
html[data-theme="dark"] a.post-link .post-excerpt { color: var(--rl-text-muted); }
html[data-theme="dark"] a.post-link .more-link { color: var(--rl-link); }
html[data-theme="dark"] hr { border-color: var(--rl-line-strong); opacity: 1; }
html[data-theme="dark"] code { background: var(--rl-surface-2); color: #e6c07b; }
html[data-theme="dark"] pre { color: var(--rl-text); }
html[data-theme="dark"] ::selection { background: rgba(77, 168, 218, .35); }

/* ---- Bootstrap utilities ------------------------------------------------- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body { background-color: var(--rl-surface) !important; }
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .theme-bg-light,
html[data-theme="dark"] .hero-wrapper { background-color: var(--rl-bg-alt) !important; }
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body { color: var(--rl-text) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--rl-text-muted) !important; }
html[data-theme="dark"] .text-primary { color: var(--rl-accent) !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end { border-color: var(--rl-line-strong) !important; }
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg { box-shadow: var(--rl-shadow) !important; }

/* ---- Components ---------------------------------------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .popover {
    background-color: var(--rl-surface); color: var(--rl-text); border-color: var(--rl-line);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { background-color: transparent; border-color: var(--rl-line); }
html[data-theme="dark"] .card-text,
html[data-theme="dark"] .card-body { color: var(--rl-text); }
html[data-theme="dark"] .list-group-item-action:hover { background-color: var(--rl-surface-2); color: var(--rl-heading); }
html[data-theme="dark"] .accordion-button { background-color: var(--rl-surface); color: var(--rl-heading); }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--rl-surface-2); color: var(--rl-heading); box-shadow: inset 0 -1px 0 var(--rl-line); }
html[data-theme="dark"] .accordion-button::after,
html[data-theme="dark"] .btn-close,
html[data-theme="dark"] .modal .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-theme="dark"] .modal-backdrop.show { opacity: .7; }

html[data-theme="dark"] .dropdown-menu { background-color: var(--rl-surface-2); border-color: var(--rl-line-strong); color: var(--rl-text); }
html[data-theme="dark"] .dropdown-item { color: var(--rl-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .navbar .dropdown-item:hover,
html[data-theme="dark"] .navbar .dropdown-item.active { background-color: var(--rl-surface-3); color: var(--rl-heading); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--rl-line); }

html[data-theme="dark"] .nav-tabs { border-color: var(--rl-line-strong); }
html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--rl-surface); color: var(--rl-heading); border-color: var(--rl-line-strong) var(--rl-line-strong) var(--rl-surface); }
html[data-theme="dark"] .nav-pills .nav-link:not(.active) { color: var(--rl-text); }

html[data-theme="dark"] .table { color: var(--rl-text); border-color: var(--rl-line); --bs-table-striped-color: var(--rl-text); --bs-table-active-color: var(--rl-text); --bs-table-hover-color: var(--rl-heading); --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-hover-bg: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--rl-line); }
/* Bootstrap 5.0 draws the header/body divider in currentColor — a bright 2px line on dark */
html[data-theme="dark"] .table > :not(:last-child) > :last-child > * { border-bottom-color: var(--rl-line-strong); }
html[data-theme="dark"] .table > :not(:first-child) { border-top-color: var(--rl-line-strong); }
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > * > * { background-color: var(--rl-surface-2) !important; color: var(--rl-heading) !important; }

html[data-theme="dark"] .pagination .page-link { background-color: var(--rl-surface); border-color: var(--rl-line); color: var(--rl-text); }
html[data-theme="dark"] .page-item.active .page-link { background-color: var(--rl-surface-3); color: var(--rl-heading); }
html[data-theme="dark"] .breadcrumb-item, html[data-theme="dark"] .breadcrumb-item.active { color: var(--rl-text-muted); }
html[data-theme="dark"] .badge.bg-light { color: var(--rl-heading) !important; }
html[data-theme="dark"] .alert-light { background: var(--rl-surface-2); color: var(--rl-text); border-color: var(--rl-line); }

/* ---- Forms --------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="password"] {
    background-color: var(--rl-input-bg); color: var(--rl-heading); border-color: var(--rl-line-strong);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background-color: var(--rl-input-bg); color: var(--rl-heading); border-color: var(--rl-accent); box-shadow: 0 0 0 .2rem rgba(77, 168, 218, .25); }
html[data-theme="dark"] .form-control::placeholder { color: var(--rl-text-faint); }
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] { background-color: var(--rl-surface-2); }
html[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9d1d9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .form-check-input { background-color: var(--rl-input-bg); border-color: var(--rl-line-strong); }
html[data-theme="dark"] .form-check-input:checked { background-color: var(--rl-accent); border-color: var(--rl-accent); }
html[data-theme="dark"] .form-label, html[data-theme="dark"] label { color: var(--rl-text); }
html[data-theme="dark"] .form-text { color: var(--rl-text-muted); }

/* ---- Buttons ------------------------------------------------------------- */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-inverse,
html[data-theme="dark"] .btn-social { background-color: var(--rl-surface-2); border-color: var(--rl-line-strong); color: var(--rl-heading); }
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-inverse:hover,
html[data-theme="dark"] .btn-social:hover { background-color: var(--rl-surface-3); color: var(--rl-heading); }
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-secondary { color: var(--rl-text); border-color: var(--rl-line-strong); }
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--rl-surface-3); color: var(--rl-heading); }
html[data-theme="dark"] .btn-outline-primary { color: var(--rl-accent); border-color: var(--rl-accent); }
html[data-theme="dark"] .btn-outline-primary:hover { background-color: var(--rl-accent); color: #050608; }
html[data-theme="dark"] .btn-dark { background-color: #f4f6f8; border-color: #f4f6f8; color: #0a0b0d; }
html[data-theme="dark"] .btn-primary { background-color: var(--rl-btn-primary); border-color: var(--rl-btn-primary); color: #fff; }
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus { background-color: var(--rl-btn-primary-hover); border-color: var(--rl-btn-primary-hover); color: #fff; }
html[data-theme="dark"] .btn-link { color: var(--rl-link); }

/* ---- Header -------------------------------------------------------------- */
html[data-theme="dark"] .header.rlheader,
html[data-theme="dark"] header.header.rlheader,
html[data-theme="dark"] .rlheader { background: rgba(5, 6, 8, .82) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--rl-line); }
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar-light { background-color: transparent !important; }
html[data-theme="dark"] .header .site-logo .logo-icon,
html[data-theme="dark"] .footer .logo-icon { filter: brightness(0) invert(1); }
html[data-theme="dark"] .navbar-toggler { color: var(--rl-heading); }
html[data-theme="dark"] .navbar-collapse { background-color: transparent; }
html[data-theme="dark"] #header-main .rl-user-dropdown-menu.dropdown-menu { background-color: var(--rl-surface-2) !important; }

/* ---- Footer -------------------------------------------------------------- */
html[data-theme="dark"] .footer { background: var(--rl-bg) !important; color: var(--rl-text-muted); border-top: 1px solid var(--rl-line); }
html[data-theme="dark"] .footer h4, html[data-theme="dark"] .footer h5, html[data-theme="dark"] .footer h6,
html[data-theme="dark"] .footer .footer-col-title { color: var(--rl-heading); }
html[data-theme="dark"] .footer a,
html[data-theme="dark"] .footer .text-link { color: var(--rl-text-muted) !important; }
html[data-theme="dark"] .footer a:hover { color: var(--rl-heading) !important; }
html[data-theme="dark"] .social-list li { background: var(--rl-surface-2); }

/* ---- Launch template sections ------------------------------------------- */
html[data-theme="dark"] .theme-icon-holder,
html[data-theme="dark"] .theme-check-icon,
html[data-theme="dark"] .features-columns-section .icon-holder { background: var(--rl-surface-2); color: var(--rl-accent); }
html[data-theme="dark"] .theme-icon-holder .svg-inline--fa,
html[data-theme="dark"] .benefits-section .item .title-note,
html[data-theme="dark"] .data-list .number,
html[data-theme="dark"] .faq-section .faq-icon,
html[data-theme="dark"] .guide-section .icon-holder,
html[data-theme="dark"] .case-meta .case-type-icon,
html[data-theme="dark"] .case-list .case-list-number,
html[data-theme="dark"] .features-columns-section .icon-holder .icon,
html[data-theme="dark"] .pricing-table .pricing-figure { color: var(--rl-accent); }
html[data-theme="dark"] .news-banner,
html[data-theme="dark"] .stories-section .item,
html[data-theme="dark"] .featured-slider .item,
html[data-theme="dark"] .related-posts-section .post-item,
html[data-theme="dark"] .team-section .member,
html[data-theme="dark"] .guide-section .item:hover,
html[data-theme="dark"] .pricing-tab,
html[data-theme="dark"] .pricing-table,
html[data-theme="dark"] .faq-accordion .accordion-item,
html[data-theme="dark"] .faq-accordion .accordion-header,
html[data-theme="dark"] .contact-card-box,
html[data-theme="dark"] .contact-form-box,
html[data-theme="dark"] .slider-container .slider-custom-controls div { background: var(--rl-surface); color: var(--rl-text); border-color: var(--rl-line); }
html[data-theme="dark"] .testimonials-slider.theme-bg-light,
html[data-theme="dark"] .slider-container .item-inner { background: var(--rl-surface) !important; }
html[data-theme="dark"] .pricing-table .icon-cross,
html[data-theme="dark"] .pricing-table tr.tr-data-type td { background: var(--rl-surface-2); }
html[data-theme="dark"] .or-text { background: var(--rl-bg); color: var(--rl-text-muted); }
html[data-theme="dark"] .news-banner,
html[data-theme="dark"] .news-banner:hover,
html[data-theme="dark"] .pricing-table .pricing-plan-name,
html[data-theme="dark"] .case-meta .case-type-info,
html[data-theme="dark"] .case-study-content .case-intro,
html[data-theme="dark"] .case-list .case-list-header,
html[data-theme="dark"] .team-section .member-name,
html[data-theme="dark"] .modal-member .member-name,
html[data-theme="dark"] .features-tab .nav-item .nav-link,
html[data-theme="dark"] .faq-accordion .accordion-header .accordion-button { color: var(--rl-heading); }
html[data-theme="dark"] .features-tab .nav-item .nav-link.active,
html[data-theme="dark"] .features-tab .nav-item .nav-link:hover,
html[data-theme="dark"] .features-tab .nav-item .nav-link.active .icon,
html[data-theme="dark"] .features-tab .nav-item .nav-link:hover .icon { color: var(--rl-accent); }
html[data-theme="dark"] .slider-container .tns-nav button { background: var(--rl-surface-3); }
html[data-theme="dark"] .slider-container .tns-nav button.tns-nav-active { background: var(--rl-accent); }
html[data-theme="dark"] .more-link { color: var(--rl-link); }

/* ---- Shared rli.css components ------------------------------------------ */
html[data-theme="dark"] .technology-filter-container,
html[data-theme="dark"] .rl-catalog-attribute-filters { background: var(--rl-surface-2); }
html[data-theme="dark"] .technology-filter { color: var(--rl-text) !important; }
html[data-theme="dark"] .technology-filter.active,
html[data-theme="dark"] .technology-filter.active:hover { background: var(--rl-surface-3) !important; color: var(--rl-heading) !important; }
html[data-theme="dark"] .rl-design-center-banner { background: linear-gradient(135deg, rgba(77, 168, 218, .14), rgba(43, 95, 217, .1)); border-color: var(--rl-line); }
html[data-theme="dark"] .rl-design-center-banner-text { color: var(--rl-text); }
html[data-theme="dark"] .pdf-download-btn { color: var(--rl-text); }

/* Logos and line art drawn black-on-transparent read as white on dark. */
html[data-theme="dark"] img.rl-invert-dark,
html[data-theme="dark"] .rl-invert-dark img { filter: brightness(0) invert(1); }
/* Photos / screenshots that were tuned for white pages get a soft edge. */
html[data-theme="dark"] img.rl-plate-dark { background: #fff; border-radius: 8px; }