/* =====================================================================================
   PUBLIC SITE DARK THEME
   Active while <html> has the `dark` class (pro/js/theme.js; shared oonoo_theme setting).
   - public-dark-utilities.css (generated by scripts/build-dark-theme.mjs) recolours the
     Tailwind utilities of the pages in PUBLIC_PAGES.
   - This file: tokens, page base, theme switch, StyleSheet.css components, images and
     per-page exceptions. Plain `html.dark` rules win over the generated layer.
   Paper stays light (.contract, .oonoo-invoice-doc, .preview-page, html2pdf clone).
   ===================================================================================== */

/* -------------------------------------------------------------------------------------
   Theme switch. The slot reserves its size before js/themeToggle.js fills it.
   ------------------------------------------------------------------------------------- */
[data-theme-toggle-slot] {
    display: inline-flex;
    align-items: center;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
}
.oonoo-theme-toggle,
.oonoo-theme-toggle:focus,
.oonoo-theme-toggle:active {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.oonoo-theme-toggle:focus-visible { outline: 2px solid #039be5; outline-offset: 2px; }
.oonoo-theme-toggle--floating,
.oonoo-theme-toggle--floating:focus,
.oonoo-theme-toggle--floating:active {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
}
.oonoo-theme-toggle__knob {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    background: #111e6d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}
.oonoo-theme-toggle__knob svg { width: 0.7rem; height: 0.7rem; }
.oonoo-theme-toggle .oonoo-theme-moon { display: none; }
.oonoo-theme-toggle[aria-checked="true"] .oonoo-theme-toggle__knob { transform: translateX(1.25rem); }
.oonoo-theme-toggle[aria-checked="true"] .oonoo-theme-sun { display: none; }
.oonoo-theme-toggle[aria-checked="true"] .oonoo-theme-moon { display: block; }

/* Phones: pages with a language menu move the switch into it (.oonoo-theme-slot--menu);
   elsewhere the header switch becomes a round sun/moon button. */
@media (max-width: 639px) {
    .oonoo-theme-slot--desktop { display: none; }
    [data-theme-toggle-slot]:not(.oonoo-theme-slot--menu) {
        width: 1.75rem;
        height: 1.75rem;
    }
    [data-theme-toggle-slot]:not(.oonoo-theme-slot--menu) .oonoo-theme-toggle,
    [data-theme-toggle-slot]:not(.oonoo-theme-slot--menu) .oonoo-theme-toggle:focus,
    [data-theme-toggle-slot]:not(.oonoo-theme-slot--menu) .oonoo-theme-toggle:active {
        width: 1.75rem;
        height: 1.75rem;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    [data-theme-toggle-slot]:not(.oonoo-theme-slot--menu) .oonoo-theme-toggle__knob,
    [data-theme-toggle-slot]:not(.oonoo-theme-slot--menu) .oonoo-theme-toggle[aria-checked="true"] .oonoo-theme-toggle__knob {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }
    [data-theme-toggle-slot]:not(.oonoo-theme-slot--menu) .oonoo-theme-toggle__knob svg { width: 0.95rem; height: 0.95rem; }
}

html.dark .oonoo-theme-toggle {
    background: rgba(23, 37, 122, 0.95);
    border-color: rgb(60, 76, 166);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html.dark .oonoo-theme-toggle__knob { background: #fff; color: #111e6d; }

/* -------------------------------------------------------------------------------------
   Tokens: same values as pro/dashboard-dark.css and css/recipient-dark.css.
   ------------------------------------------------------------------------------------- */
html.dark {
    color-scheme: dark;

    --dk-page: 11 19 77;
    --dk-surface: 17 30 109;
    --dk-raised: 23 37 122;
    --dk-raised-2: 29 44 134;
    --dk-raised-3: 37 53 146;
    --dk-raised-4: 48 64 158;

    --dk-line-soft: 34 49 138;
    --dk-line: 45 60 152;
    --dk-line-2: 60 76 166;

    --dk-ink: 255 255 255;
    --dk-ink-2: 226 231 251;
    --dk-ink-3: 196 204 240;
    --dk-ink-4: 165 176 225;
    --dk-ink-5: 133 146 205;
    --dk-ink-6: 98 112 182;

    --dk-invert: 255 255 255;
    --dk-invert-hover: 220 229 255;
    --dk-invert-ink: 17 30 109;

    /* Opaque light-blue tint for fixed / overlapping cards */
    --dk-tint-solid: 32 54 109;

    background-color: rgb(var(--dk-page));
}

html.dark body {
    background-color: rgb(var(--dk-page));
    color: rgb(var(--dk-ink-2));
}

:where(html.dark) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select):not(:where(.contract *, .oonoo-invoice-doc *, .preview-page *, .html2pdf__container *)) {
    background-color: rgb(var(--dk-raised));
    color: rgb(var(--dk-ink));
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: rgb(var(--dk-ink-5));
}

/* -------------------------------------------------------------------------------------
   Paper
   ------------------------------------------------------------------------------------- */
html.dark :is(.contract, .oonoo-invoice-doc, .preview-page, .html2pdf__container) {
    color: #000;
    color-scheme: light;
}

/* -------------------------------------------------------------------------------------
   Inverted navy fills: bg-[#111e6d] turns white, so text on it turns navy.
   ------------------------------------------------------------------------------------- */
html.dark :is(.bg-\[\#111e6d\], .bg-\[\#111E6D\], .bg-\[\#111e6f\]):not(.bg-opacity-10):not(:where(.contract *, .oonoo-invoice-doc *, .preview-page *)),
html.dark :is(.bg-\[\#111e6d\], .bg-\[\#111E6D\], .bg-\[\#111e6f\]):not(.bg-opacity-10):not(:where(.contract *, .oonoo-invoice-doc *, .preview-page *)) :is(.text-white, .text-blue-100, .text-gray-200, .text-gray-300),
html.dark :is(.hover\:bg-\[\#111e6d\], .hover\:bg-\[\#111e6f\]):hover {
    color: rgb(var(--dk-invert-ink));
}

/* -------------------------------------------------------------------------------------
   Images
   ------------------------------------------------------------------------------------- */
/* Black lettering turns white; hue-rotate keeps the blue "PRO" blue. */
html.dark img[src*="OONOOlogo_TM"],
html.dark img[src*="OONOOlogoPRO2"],
html.dark img[src*="OONEWS logo"] {
    filter: invert(1) hue-rotate(180deg);
}

/* Accent fills stay bright, so dark text on them stays dark. */
html.dark :is(.bg-\[\#039be5\], .bg-\[\#039BE5\], .bg-\[\#6dd0f1\], .bg-\[\#7ef860\], .bg-\[\#5be37d\], .bg-\[\#0fc640\], .bg-\[\#2aa9ff\]):is(.text-black, .text-gray-900, .text-gray-800),
html.dark :is(.bg-\[\#039be5\], .bg-\[\#039BE5\], .bg-\[\#6dd0f1\], .bg-\[\#7ef860\], .bg-\[\#5be37d\], .bg-\[\#0fc640\], .bg-\[\#2aa9ff\]) :is(.text-black, .text-gray-900, .text-gray-800) {
    color: #000;
}
html.dark :is(.bg-\[\#039be5\], .bg-\[\#039BE5\], .bg-\[\#6dd0f1\], .bg-\[\#7ef860\], .bg-\[\#5be37d\], .bg-\[\#0fc640\]):is(.text-\[\#111e6d\], .text-\[\#111E6D\]) {
    color: #111e6d;
}

/* Flow diagram (white background, skin tones) shows as a light card, not inverted. */
html.dark img[src*="OONOOflowincolor"] {
    border-radius: 1rem;
}

/* -------------------------------------------------------------------------------------
   Page backdrops (css/StyleSheet.css): dark halftone twin, same size and crop.
   ------------------------------------------------------------------------------------- */
html.dark #mainPage {
    background-color: rgb(var(--dk-page));
    background-image: url(../img/Backgrounds/OONOO_bg2Dark.webp);
}
@media screen and (max-width: 600px) {
    html.dark #mainPage {
        background-image: url(../img/Backgrounds/OONOO_bg2MobileDark.webp);
    }
}
html.dark :is(#businessPage, #endPage, #endPage2, #pricingPage) {
    background: rgb(var(--dk-page));
}

/* -------------------------------------------------------------------------------------
   StyleSheet.css components
   ------------------------------------------------------------------------------------- */
html.dark .button-27,
html.dark .button-27_1 {
    background-color: #fff;
    border-color: #fff;
    color: #111e6d;
}
html.dark :is(.button-27, .button-27_1):is(:hover, :active, :focus) {
    color: #fff;
}
html.dark .button-27_2 {
    background-color: rgb(var(--dk-raised-3));
}

html.dark .button-57 {
    background: rgb(var(--dk-surface));
    color: #fff;
}
html.dark :is(.homeBtn, .backBtn, .backBtnVisible, .checkout_back_btn, .popUpBtn) {
    background-color: rgb(var(--dk-surface));
    color: #fff;
}

html.dark :is(.info-popup, .infoPopUp) {
    background-color: rgb(var(--dk-surface));
    border-color: rgb(255 255 255 / 0.7);
    color: rgb(var(--dk-ink-2));
}
html.dark .popUpDiv { background: rgb(var(--dk-page) / 0.6); }
html.dark .show { background: rgb(var(--dk-page) / 0.75); }
html.dark .payment { background-color: rgb(0 0 0 / 0.7); }
html.dark .floating-letter { color: rgb(255 255 255 / 0.7); }

html.dark .duration-switch { background: rgb(var(--dk-raised-2)); }
html.dark .duration-switch label { color: rgb(var(--dk-ink-2)); }
html.dark :is(.opacity-label, .duration-label):not(.bg-\[\#111e6d\]):hover {
    background-color: rgb(var(--dk-raised-3)) !important;
}
html.dark :is(.opacity-label, .duration-label).bg-\[\#111e6d\] {
    background-color: #fff !important;
    color: #111e6d !important;
}

html.dark .textareaMssg {
    background-color: rgb(var(--dk-raised));
    color: rgb(var(--dk-ink));
}
html.dark .textareaMssg:focus { border-color: #fff; }
html.dark .locked-input {
    background-color: rgb(74 222 128 / 0.14);
    border-color: rgb(74 222 128 / 0.45);
    color: #bbf7d0;
}
html.dark #uploadDiv.dragover { background-color: rgb(var(--dk-raised-3)); }

html.dark input[type=range] { background: rgb(var(--dk-raised-3)) !important; }
html.dark input[type=range]:hover { background: rgb(var(--dk-raised-4)) !important; }
html.dark input[type=range]::-webkit-slider-thumb { background: #fff !important; }
html.dark input[type=range]::-webkit-slider-thumb:hover { background: #cbf1ff !important; }
html.dark input[type=range]::-moz-range-thumb { background: #fff !important; }
html.dark input[type=range]::-moz-range-track { background: rgb(var(--dk-raised-3)) !important; }
html.dark input[type="month"] { background-color: rgb(var(--dk-raised)); }

html.dark #checkout button[type="submit"] {
    background-color: #fff !important;
    color: #111e6d !important;
}
html.dark #checkout button[type="submit"]:hover { background-color: rgb(var(--dk-invert-hover)) !important; }

html.dark .preview-tray { background: rgb(var(--dk-page)); }

/* Contract type picker (same treatment as pro/dashboard-dark.css) */
html.dark .ctp-panel { background: rgb(var(--dk-raised)); border-color: rgb(var(--dk-line)); }
html.dark .ctp-group-label { color: rgb(var(--dk-ink)); }
html.dark .ctp-group-hint,
html.dark .ctp-card-desc,
html.dark .ctp-summary-kind { color: rgb(var(--dk-ink-4)); }
html.dark .ctp-card { background: rgb(var(--dk-surface)); border-color: rgb(var(--dk-line-2)); }
html.dark .ctp-card:hover { box-shadow: 0 4px 12px rgb(0 0 0 / 0.3); }
html.dark .ctp-card:focus-visible { border-color: #fff; }
html.dark .ctp-card-icon { background: rgb(var(--dk-raised-3)); color: #fff; }
html.dark .ctp-card-name,
html.dark .ctp-summary-name { color: rgb(var(--dk-ink)); }
html.dark .ctp-card-tool { background: linear-gradient(135deg, #1c348c 0%, #1a3c96 100%); border-color: #4262c0; }
html.dark .ctp-card-tool:hover { border-color: #fff; }
html.dark .ctp-card-tick { background: #fff; color: #111e6d; }
html.dark .ctp-card-selected { border-color: #fff; background: rgb(var(--dk-raised-3)); box-shadow: 0 0 0 1px #fff inset; }
html.dark .ctp-card-selected.ctp-card-tool { background: linear-gradient(135deg, #2743a3 0%, #244ba6 100%); }
html.dark .ctp-summary { background: rgb(var(--dk-raised)); border-color: #fff; }
html.dark .ctp-help,
html.dark .ctp-change { color: #fff; background: transparent; border-color: #fff; }
html.dark .ctp-help:hover,
html.dark .ctp-change:hover { background: #fff; color: #111e6d; }

/* -------------------------------------------------------------------------------------
   index.php
   ------------------------------------------------------------------------------------- */
/* Pro banner: raised navy instead of inverting to white. */
html.dark .oonoo-pro-banner.oonoo-pro-banner {
    background-color: rgb(var(--dk-raised-2));
    color: #fff;
}
html.dark .oonoo-pro-banner.oonoo-pro-banner .text-white { color: #fff; }

html.dark #transferTypeChoice { background-color: rgb(var(--dk-page) / 0.8); }

html.dark .idv-animated-border {
    background:
        linear-gradient(rgb(var(--dk-surface)), rgb(var(--dk-surface))) padding-box,
        linear-gradient(90deg, #ffffff 0%, #039be5 16.666%, #cbf1ff 33.333%, #7ef860 50%, #cbf1ff 66.666%, #039be5 83.333%, #ffffff 100%) border-box;
    background-size: 100% 100%, 360px 100%;
    background-repeat: no-repeat, repeat;
}

/* Tutorial carousel caption banners keep their pastel colours and dark text. */
html.dark .video-title-banner { color: #111e6d; }
html.dark .tutorial-filter.bg-black {
    background-color: #fff;
    color: #111e6d;
    border-color: #fff;
}

/* Watermark example chips (styles injected by js/watermarkExamples.js) */
html.dark .wm-ex-label { color: rgb(var(--dk-ink-5)); }
html.dark :is(.wm-ex-chip, .wm-ex-shuffle) {
    background: rgb(var(--dk-raised));
    border-color: rgb(var(--dk-line-2));
    color: rgb(var(--dk-ink-3));
}
html.dark :is(.wm-ex-chip, .wm-ex-shuffle):hover {
    background: rgb(var(--dk-raised-3));
    border-color: #fff;
    color: #fff;
}
/* View Only watermark controls */
html.dark .wm-num { background: rgb(var(--dk-raised)); border-color: rgb(var(--dk-line-2)); }
html.dark .wm-num:focus { border-color: #fff; }
/* The navy swatch needs an outline to show on navy. */
html.dark .wm-n-clr { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.3); }

/* Signature pad stays white (black ink is copied into the agreement as-is). */
html.dark :is(#signature, #sign1, #sign2, #c2sign1) {
    background-color: #fff;
    border-radius: 0.375rem;
}
html.dark .invoice-builder input[type="file"]::file-selector-button {
    background: #fff;
    color: #111e6d;
}
html.dark .invoice-builder input[type="file"]::file-selector-button:hover {
    background: #039be5;
    color: #fff;
}

/* Line art with a dark twin (scripts/build-dark-artwork.py): the theme shows one <img>;
   the lazy dark twin is not fetched while hidden. */
html:not(.dark) .oonoo-art-dark,
html.dark .oonoo-art-light { display: none !important; }

/* Product page illustration panels with baked-in black text, and their callouts, stay light. */
html.dark .oonoo-light-panel { background-color: #cbf1ff !important; }
html.dark .oonoo-paper-panel { background-color: #fff !important; }
html.dark :is(.oonoo-light-panel, .oonoo-paper-panel),
html.dark :is(.oonoo-light-panel, .oonoo-paper-panel) * { color: #000; }

/* Black-on-white halftone: inverted, then `lighten` drops the black. */
html.dark img[src*="dotted thank you"],
html.dark img[src*="File_expired_OONOO"] {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: lighten;
}

/* -------------------------------------------------------------------------------------
   Recipient CTA card (components/recipient-cta.php) on expired.php; as css/recipient-dark.css.
   ------------------------------------------------------------------------------------- */
html.dark .oonoo-rcta {
    background: rgb(var(--dk-tint-solid));
    border-color: #fff;
}
html.dark .oonoo-rcta__title { color: #fff; }
html.dark .oonoo-rcta__body { color: rgb(var(--dk-ink-2)); }
html.dark .oonoo-rcta__primary {
    background: #fff;
    border-color: #fff;
    color: #111e6d;
}
html.dark .oonoo-rcta__primary:hover,
html.dark .oonoo-rcta__primary:focus {
    background: rgb(var(--dk-invert-hover));
    border-color: rgb(var(--dk-invert-hover));
    color: #111e6d;
}
html.dark .oonoo-rcta__secondary,
html.dark .oonoo-rcta__secondary:hover,
html.dark .oonoo-rcta__secondary:focus,
html.dark .oonoo-rcta__note-link,
html.dark .oonoo-rcta__note-link:hover,
html.dark .oonoo-rcta__note-link:focus { color: #fff; }
html.dark .oonoo-rcta__note {
    border-top-color: rgb(255 255 255 / 0.18);
    color: rgb(var(--dk-ink-3));
}

/* -------------------------------------------------------------------------------------
   documents.html and freesampleletters.html: tiles and .sl-modal. .sl-paper and .ct-sheet stay paper.
   ------------------------------------------------------------------------------------- */
/* The tiles carry an inline light gradient. */
html.dark .sample_letter {
    background: linear-gradient(to right, #14307c, rgb(var(--dk-surface))) !important;
}
html.dark .sl-dialog {
    background: rgb(var(--dk-surface));
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.5);
}
html.dark .sl-head { border-bottom-color: rgb(var(--dk-line)); }
html.dark .sl-eyebrow { color: #4fb6f2; }
html.dark .sl-title { color: #fff; }
html.dark .sl-close { background: rgb(var(--dk-raised-3)); color: #fff; }
html.dark .sl-close:hover { background: #fff; color: #111e6d; }
html.dark .sl-body { background: rgb(var(--dk-page)); }
html.dark .sl-actions { background: rgb(var(--dk-surface)); border-top-color: rgb(var(--dk-line)); }
html.dark .sl-meta { color: rgb(var(--dk-ink-4)); }
html.dark .sl-download { background: #fff; color: #111e6d; }
html.dark .sl-download:hover { background: #039be5; color: #fff; }
html.dark .sl-tip { color: rgb(var(--dk-ink-3)); }
html.dark .ct-about p { color: rgb(var(--dk-ink-2)); }
html.dark .ct-label { color: rgb(var(--dk-ink-4)); }
html.dark .ct-chips li { background: rgb(var(--dk-raised)); border-color: rgb(var(--dk-line-2)); color: #fff; }
html.dark :is(.sl-paper, .ct-sheet) { color-scheme: light; }

/* Opaque halftone backgrounds (howtouse.html, .emailUI): multiplied, white turns navy. */
html.dark [style*="Backgrounds/dotted"],
html.dark .emailUI {
    background-color: rgb(var(--dk-page));
    background-blend-mode: multiply;
}

/* privacy.html: scoped .policy typography */
html.dark .policy { color: rgb(var(--dk-ink-2)); }
html.dark .policy :is(h1, h2, strong) { color: #fff; }
html.dark .policy h2 { border-top-color: rgb(var(--dk-line)); }
html.dark .policy .updated,
html.dark .policy li::marker { color: rgb(var(--dk-ink-5)); }
html.dark .policy a { color: #4fb6f2; }

/* pricing.php: the Stripe pricing table stays light (Stripe iframe), rounded as a card. */
html.dark stripe-pricing-table {
    border-radius: 1rem;
    overflow: hidden;
}

/* -------------------------------------------------------------------------------------
   usercases-*.html: inline light panels
   ------------------------------------------------------------------------------------- */
html.dark [style*="linear-gradient(to right, #ffffff"] {
    background: linear-gradient(to right, rgb(var(--dk-surface)) 0%, rgb(var(--dk-surface)) 40%, #14307c 100%) !important;
}
html.dark [style*="linear-gradient(to right, #e5e7eb"] {
    background: linear-gradient(to right, rgb(var(--dk-raised-2)), rgb(var(--dk-surface))) !important;
}
html.dark [style*="background:#cbf1ff"] {
    background: rgb(125 211 252 / 0.2) !important;
}

/* -------------------------------------------------------------------------------------
   watermark.html: the preview canvas and logo chips keep their light background.
   ------------------------------------------------------------------------------------- */
html.dark #upload-area { border-color: rgb(255 255 255 / 0.7); }
html.dark #upload-area:hover,
html.dark #upload-area.drag-over { background-color: rgb(var(--dk-raised-2)); border-color: #039be5; }
html.dark input[type="range"] { accent-color: #fff; }
html.dark input[type="color"] { background: rgb(var(--dk-raised)); border-color: rgb(var(--dk-line-2)); }
html.dark .setting-label { color: rgb(var(--dk-ink-3)); }
html.dark .setting-section { border-top-color: rgb(var(--dk-line)); }
html.dark :is(.pos-btn, .pattern-btn, .example-chip, .shuffle-btn, .cat-chip, .val-input) {
    background: rgb(var(--dk-raised));
    border-color: rgb(var(--dk-line-2));
    color: rgb(var(--dk-ink-3));
}
html.dark .val-input { color: #4fb6f2; }
html.dark :is(.pos-btn, .pattern-btn, .example-chip, .shuffle-btn, .cat-chip):hover {
    background: rgb(var(--dk-raised-3));
    border-color: #fff;
    color: #fff;
}
html.dark :is(.pos-btn, .pattern-btn, .cat-chip).active {
    background: #fff;
    border-color: #fff;
    color: #111e6d;
}
html.dark .val-input:focus { border-color: #fff; }
html.dark .sample-img-chip { border-color: rgb(var(--dk-line-2)); }
html.dark .sample-img-chip:hover { border-color: #fff; }
html.dark .color-preset { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.3); }
html.dark #download-btn:disabled:hover { background-color: #fff !important; }

/* article.php: .article-content prose */
html.dark .article-content { color: rgb(var(--dk-ink-2)); }
html.dark .article-content :is(h1, h2, h3, h4, h5, h6, strong, th) { color: #fff; }
html.dark .article-content blockquote { background-color: rgb(var(--dk-raised)); border-left-color: #60a5fa; }
html.dark .article-content code { background-color: rgb(var(--dk-raised-2)); }
html.dark .article-content pre { background-color: rgb(0 0 0 / 0.35); }
html.dark .article-content a { color: #60a5fa; }
html.dark .article-content a:hover { color: #93c5fd; }
html.dark .article-content :is(td, th) { border-color: rgb(var(--dk-line-2)); }
html.dark .article-content th { background-color: rgb(var(--dk-raised-2)); }

/* Stripe Embedded Checkout wrapper stays white to match Stripe's light iframe. */
html.dark div:has(> #checkout) {
    background-color: #fff;
    border-radius: 0.75rem;
}