@charset "UTF-8";

/*
 * File: css/modules/tnsb-dark-system.css
 * Version: 1.0.0
 * Date: 2026-10-22
 * Purpose: Global dark-page palette, text-field surfaces, and dark-background buttons.
 *
 * Change `--tnsb-page-bg` to recolor the dark page surfaces.
 * Keep light panels and externally hosted payment controls independent.
 */

/* Global palette (site-wide future background changes start here). */
:root {
    --tnsb-page-bg: #121212;
    --tnsb-accent-lime: #b4ff00; /* Align with PR #139's site-wide accent. */
    --tnsb-subtext: rgba(255, 255, 255, 0.6);
    --tnsb-field-bg: rgba(255, 255, 255, 0.12);
}

/* The root page background and dark-only page surfaces. */
html,
body {
    background-color: var(--tnsb-page-bg);
}
/* TALKROOM retains its own daytime and nighttime backgrounds in talkroom.css. */
#loading,
.tnsb .tnsb-plan-comparison,
.mv > .main {
    background-color: var(--tnsb-page-bg);
}

/*
 * Text-entry controls: subdued translucent white surface and white text on dark pages.
 * No submit, checkbox, radio, range, hidden, or third-party iframe controls.
 * Important is limited to these two properties so pre-existing component
 * CSS cannot silently restore a different input background/text color.
 */
body :is(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="file"],
    textarea,
    select
) {
    background-color: var(--tnsb-field-bg) !important;
    color: #fff !important;
}
body :is(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea
)::placeholder {
    color: var(--tnsb-subtext);
}
/* The white login/registration/password-reset panels keep their original
 * light input surfaces; the dark-page form palette must not leak inside.
 */
body .tnsb--form--wrap .right--area :is(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select
) {
    background-color: #f7f7f7 !important;
    color: #000 !important;
}

/* On white login/register/reset panels, placeholders also stay dark. */
body .tnsb--form--wrap .right--area :is(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea
)::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

/* Native dropdown option lists must remain independently readable. */
body select option,
body select optgroup {
    background: #fff;
    color: #000;
}

/* Dark-page secondary labels, descriptions, and timestamps.
 * .reel-title is a primary heading and keeps the white title rule in reel.css.
 */
body .reel-date,
body .tnsb-info-date,
body .tnsb-comment__meta,
body .tnsb-comment__time,
body .tnsb-latest-comments .tnsb-comment__meta,
body .tnsb-latest-comments .tnsb-comment__time,
body .tnsb-name,
body .tnsb-member-group-title,
body .tnsb-member-group-title .tnsb-count,
body .tnsb-member-foot,
body .tnsb .tnsb-plan-hero__note,
body .tnsb .plan_cs2,
body .tnsb .cs_cancel,
body .tnsb .tnsb-cancel-accepted,
body .tnsb .tnsb-cancel-pending__closed,
body .tnsb .tnsb-resume-subscription-form p,
body .tnsb .mypage--link--list li.list2 a span,
body .tnsb .mypage--link--list .menu-icon,
body .program_text,
body .corner-description-area,
body .post-navigation .nav-label,
body .post--status dl dt,
body .tnsb_add_alpha,
body .tnsb_add_alpha.plans,
body .top_about_area > .tit > span {
    color: var(--tnsb-subtext);
}

/* Dark-on-dark CTAs are inverted; functional white or light panels excluded. */
body .tnsb .btn--area a,
body .nl_area .btn a,
body .nl_area span.btn,
body .tnsb-top .btn-area a,
body dl.otayori input[type="submit"],
body .tnsb--edit--area input[type="submit"],
body .tnsb--form.mail_change input[type="submit"],
body .cancel_link button,
body .gold-early.stripe--btn--area a,
body .tnsb-odayori-btn {
    background-color: #fff;
    color: #000;
}
body .tnsb .btn--area a,
body .nl_area .btn a,
body .nl_area span.btn,
body .tnsb-top .btn-area a {
    border-color: #fff;
}
body .tnsb .btn--area a:hover,
body .nl_area .btn a:hover,
body .tnsb-top .btn-area a:hover,
body dl.otayori input[type="submit"]:hover,
body .tnsb--edit--area input[type="submit"]:hover,
body .tnsb--form.mail_change input[type="submit"]:hover,
body .cancel_link button:hover,
body .gold-early.stripe--btn--area a:hover {
    background-color: rgba(255, 255, 255, 0.85);
    color: #000;
}
/* Inverted buttons remain readable inside colored or light surfaces. */
body .membership-announce .btn a,
body .membership-announce .btn a:hover {
    background: #fff;
    color: #000;
}

/* Light content panels deliberately use dark text instead of the dark-page muted token. */
body .popup,
body .popup a:not(.openBtn),
body .tnsb--form--wrap .right--area,
body .tnsb .tnsb-plan-comparison__available,
body .membership-announce,
body .membership-announce a,
body .text_cts--inner .tex .wp-block-quote,
body .text_cts--inner .tex .wp-block-quote a {
    color: #000;
}