/* CoreColorMode/v1
   One late semantic layer resolves the persisted user preference across every
   CMViews surface. Themes may change brand tokens without reimplementing the
   light/dark behavior. */
body.public-mode {
    --cm-color-bg: #10111d;
    --cm-color-bg-soft: #171824;
    --cm-color-surface: #262736;
    --cm-color-surface-raised: #2d2e3e;
    --cm-color-field: #181925;
    --cm-color-text: #f2f6fb;
    --cm-color-muted: #aeb8c8;
    --cm-color-line: rgba(255, 255, 255, 0.09);
    --cm-color-hover: rgba(255, 255, 255, 0.055);
    --cm-color-shadow: rgba(0, 0, 0, 0.24);
}

body.public-mode.color-mode-light {
    --cm-color-bg: #f2f5f9;
    --cm-color-bg-soft: #e9eef5;
    --cm-color-surface: #ffffff;
    --cm-color-surface-raised: #f7f9fc;
    --cm-color-field: #f3f6fa;
    --cm-color-text: #172033;
    --cm-color-muted: #617086;
    --cm-color-line: rgba(23, 32, 51, 0.12);
    --cm-color-hover: rgba(23, 32, 51, 0.055);
    --cm-color-shadow: rgba(28, 39, 58, 0.08);
    color: var(--cm-color-text);
    background: var(--cm-color-bg);
}

body.public-mode.color-mode-light.theme-aurora,
body.public-mode.color-mode-light.theme-grid,
body.public-mode.color-mode-light.theme-velvet {
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 25%),
        linear-gradient(180deg, #f7f9fc 0%, var(--cm-color-bg) 100%);
}

body.public-mode.color-mode-light .public-subnav {
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light .cm-head-single {
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light .cm-head-single.is-floating::before {
    border-bottom-color: var(--cm-color-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 28px var(--cm-color-shadow);
}

body.public-mode.color-mode-light .cm-head-menu a,
body.public-mode.color-mode-light .cm-head-mobile-panel a {
    color: var(--cm-color-muted);
}

body.public-mode.color-mode-light .cm-head-menu a.active,
body.public-mode.color-mode-light .cm-head-menu a:hover,
body.public-mode.color-mode-light .cm-head-mobile-panel a.active,
body.public-mode.color-mode-light .cm-head-mobile-panel a:hover {
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light .public-footer,
body.public-mode.color-mode-light .public-footer a,
body.public-mode.color-mode-light .public-footer-copy {
    color: var(--cm-color-muted);
}

body.public-mode.color-mode-light .brand,
body.public-mode.color-mode-light .public-menu a.active,
body.public-mode.color-mode-light .public-menu a:hover,
body.public-mode.color-mode-light .public-user,
body.public-mode.color-mode-light .public-profile-button,
body.public-mode.color-mode-light .public-dropdown-item,
body.public-mode.color-mode-light .public-dropdown-row,
body.public-mode.color-mode-light .public-dropdown-footer {
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light .public-menu a,
body.public-mode.color-mode-light .public-profile-copy small,
body.public-mode.color-mode-light .public-dropdown-row small {
    color: var(--cm-color-muted);
}

body.public-mode.color-mode-light .public-menu a.active,
body.public-mode.color-mode-light .public-menu a:hover,
body.public-mode.color-mode-light .public-dropdown-item:hover,
body.public-mode.color-mode-light .public-dropdown-row:hover,
body.public-mode.color-mode-light .public-dropdown-footer:hover {
    background: var(--cm-color-hover);
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light .public-icon-button,
body.public-mode.color-mode-light .public-profile-button,
body.public-mode.color-mode-light .public-dropdown {
    color: var(--cm-color-text);
    background: var(--cm-color-surface);
    border-color: var(--cm-color-line);
    box-shadow: 0 18px 42px var(--cm-color-shadow);
}

body.public-mode.color-mode-light .public-balance {
    color: #2563a9;
    background: #eef5ff;
    border-color: #cfe0f6;
}

body.public-mode.color-mode-light .cm-head-actions .public-balance:hover {
    color: #184f91;
    background: #e4effd;
    border-color: #b9d2f1;
}

body.public-mode.color-mode-light .content-card,
body.public-mode.color-mode-light .frontend-toolbar,
body.public-mode.color-mode-light .profile-panel,
body.public-mode.color-mode-light .dating-card,
body.public-mode.color-mode-light .message-card,
body.public-mode.color-mode-light .message-entry,
body.public-mode.color-mode-light .discover-filters,
body.public-mode.color-mode-light .empty-state,
body.public-mode.color-mode-light .card {
    color: var(--cm-color-text);
    background: var(--cm-color-surface);
    border-color: var(--cm-color-line);
    box-shadow: 0 16px 40px var(--cm-color-shadow);
}

body.public-mode.color-mode-light .help,
body.public-mode.color-mode-light .frontend-toolbar p,
body.public-mode.color-mode-light .profile-panel p {
    color: var(--cm-color-muted);
}

/* Photo overlays own their contrast contract and must not inherit surface text. */
body.public-mode .browse-card-photo .browse-card-overlay,
body.public-mode .browse-card-photo .browse-card-title,
body.public-mode .browse-card-photo .browse-card-name,
body.public-mode .browse-card-photo .browse-card-meta .help {
    color: #f8fafc;
    text-shadow: 0 1px 3px rgba(3, 7, 18, 0.88);
}

body.public-mode .browse-card-photo .browse-card-meta .help {
    color: rgba(248, 250, 252, 0.82);
}

body.public-mode.color-mode-light input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.public-mode.color-mode-light select,
body.public-mode.color-mode-light textarea {
    color: var(--cm-color-text);
    background-color: var(--cm-color-field);
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light input::placeholder,
body.public-mode.color-mode-light textarea::placeholder {
    color: color-mix(in srgb, var(--cm-color-muted) 76%, transparent);
}

/* Authentication is a composed image + form surface. Only the form side
   follows light mode; the photographic side keeps its authored contrast. */
body.public-mode.color-mode-light.auth-page .cm-head-auth-switch {
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light.auth-page .cm-head-auth-switch a {
    color: var(--cm-color-text);
    border-color: color-mix(in srgb, var(--cm-color-text) 48%, transparent);
}

body.public-mode.color-mode-light.auth-signup-variant-youdate {
    --cm-signup-card: var(--cm-color-surface);
    --cm-signup-field: var(--cm-color-field);
    --cm-signup-muted: var(--cm-color-muted);
    --cm-signup-line: var(--cm-color-line);
    --cm-relpicker-surface: var(--cm-color-surface);
    --cm-relpicker-text: var(--cm-color-text);
    --cm-relpicker-active: var(--cm-color-bg-soft);
    --cm-relpicker-muted: var(--cm-color-muted);
}

body.public-mode.color-mode-light.auth-page .auth-card,
body.public-mode.color-mode-light.auth-page .auth-form-panel {
    color: var(--cm-color-text);
    background: var(--cm-color-surface);
}

body.public-mode.color-mode-light.auth-page .auth-form-panel h1,
body.public-mode.color-mode-light.auth-page .auth-form-panel h2,
body.public-mode.color-mode-light.auth-page .auth-gender > span,
body.public-mode.color-mode-light.auth-page .auth-date > span,
body.public-mode.color-mode-light.auth-page .auth-gender label,
body.public-mode.color-mode-light.auth-page .auth-label-text b {
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light.auth-page .auth-muted,
body.public-mode.color-mode-light.auth-page .auth-optional,
body.public-mode.color-mode-light.auth-page .auth-terms {
    color: var(--cm-color-muted);
}

body.public-mode.color-mode-light.auth-page .auth-field,
body.public-mode.color-mode-light.auth-page .auth-form input:not([type="radio"]):not([type="hidden"]),
body.public-mode.color-mode-light.auth-page .auth-form select,
body.public-mode.color-mode-light.auth-page .auth-back {
    color: var(--cm-color-text);
    background: var(--cm-color-field);
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light.auth-page .auth-submit:disabled,
body.public-mode.color-mode-light.auth-page .auth-submit[aria-disabled="true"] {
    color: var(--cm-color-muted);
    background: var(--cm-color-bg-soft);
}

/* Public social profile: remap its private token family in light mode. */
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-profile {
    --cm-social-panel: var(--cm-color-surface);
    --cm-social-panel-strong: var(--cm-color-surface-raised);
    --cm-social-line: var(--cm-color-line);
    --cm-social-muted: var(--cm-color-muted);
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-profile-hero,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-panel,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-composer,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-empty,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-commerce-panel {
    color: var(--cm-color-text);
    background: var(--cm-color-surface);
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-avatar {
    border-color: var(--cm-color-surface);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-identity h1,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-panel h2,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-empty h2,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-commerce-panel h2,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-commerce-panel h3,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-mini-facts dd,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-data-grid dd,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-tabs a.active {
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-identity p,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-bio p,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-bio a,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-tabs a,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-panel p,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-empty p {
    color: var(--cm-color-muted);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-action:not(.primary):not(.gift):not(.tip):not(.plans),
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-primary-actions .swing-like-circle,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-tip-input,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-plan-option,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-composer textarea,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-price {
    color: var(--cm-color-text);
    background: var(--cm-color-field);
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-tip-input input {
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-popularity {
    background: var(--cm-color-bg-soft);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-more-popover,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-modal-card {
    color: var(--cm-color-text);
    background: var(--cm-color-surface);
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-menu-item {
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-menu-item:hover,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-menu-item:focus-visible,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-composer-tools label:hover {
    background: var(--cm-color-hover);
}

body.public-mode.color-mode-light.profile-social-feed-page .cm-social-modal textarea,
body.public-mode.color-mode-light.profile-social-feed-page .cm-social-gift-grid label > span {
    color: var(--cm-color-text);
    background: var(--cm-color-field);
    border-color: var(--cm-color-line);
}

/* Profile and account settings. */
body.public-mode.color-mode-light.profile-edit-page {
    background: var(--cm-color-bg);
}

body.public-mode.color-mode-light.profile-edit-page .content-card {
    color: var(--cm-color-text) !important;
}

body.public-mode.color-mode-light.profile-edit-page .profile-editor-side h1,
body.public-mode.color-mode-light.profile-edit-page .profile-settings-nav a,
body.public-mode.color-mode-light.profile-edit-page .profile-editor-toolbar h2,
body.public-mode.color-mode-light.profile-edit-page .profile-editor-section h3,
body.public-mode.color-mode-light.profile-edit-page .profile-editor label,
body.public-mode.color-mode-light.profile-edit-page .appearance-mode-card {
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light.profile-edit-page .profile-settings-nav a.muted,
body.public-mode.color-mode-light.profile-edit-page .profile-editor-toolbar p,
body.public-mode.color-mode-light.profile-edit-page .profile-editor-section-head p,
body.public-mode.color-mode-light.profile-edit-page .profile-editor-help,
body.public-mode.color-mode-light.profile-edit-page .appearance-mode-card small {
    color: var(--cm-color-muted);
}

body.public-mode.color-mode-light.profile-edit-page .profile-editor-section,
body.public-mode.color-mode-light.profile-edit-page .profile-editor-toolbar,
body.public-mode.color-mode-light.profile-edit-page .profile-editor-sticky,
body.public-mode.color-mode-light.profile-edit-page .settings-panel,
body.public-mode.color-mode-light.profile-edit-page .settings-photo-card,
body.public-mode.color-mode-light.profile-edit-page .photo-upload-panel,
body.public-mode.color-mode-light.profile-edit-page .message {
    color: var(--cm-color-text) !important;
    background: var(--cm-color-surface) !important;
    border-color: var(--cm-color-line) !important;
}

body.public-mode.color-mode-light.profile-edit-page .profile-editor-section-head,
body.public-mode.color-mode-light.profile-edit-page .settings-panel-actions {
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light.profile-edit-page .corematch-field {
    color: var(--cm-color-text);
    background: var(--cm-color-field);
    border-color: var(--cm-color-line);
}

.appearance-mode-card small {
    max-width: 170px;
    min-height: 2.4em;
    color: var(--cm-color-muted, #aeb8c8);
    font-size: 0.76rem;
    line-height: 1.2;
    text-align: center;
}

.appearance-mode-card {
    position: relative;
}

.appearance-mode-card input[type="radio"] {
    inset: 0 auto auto 0;
    width: 1px !important;
    height: 1px !important;
    margin: 0;
    clip-path: inset(50%);
}

.appearance-mode-card:focus-within .appearance-preview {
    outline: 2px solid #2687ff;
    outline-offset: 3px;
}

/* Community, groups, browse and editorial surfaces. */
body.public-mode.color-mode-light .community-panel,
body.public-mode.color-mode-light .community-composer,
body.public-mode.color-mode-light .post-card,
body.public-mode.color-mode-light .post-form-card,
body.public-mode.color-mode-light .post-detail-main,
body.public-mode.color-mode-light .post-comments-panel,
body.public-mode.color-mode-light .group-card,
body.public-mode.color-mode-light .group-detail-head,
body.public-mode.color-mode-light .group-detail-panel,
body.public-mode.color-mode-light .content-card-public,
body.public-mode.color-mode-light .content-public__hero {
    color: var(--cm-color-text);
    background: var(--cm-color-surface);
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light .post-author,
body.public-mode.color-mode-light .post-author strong,
body.public-mode.color-mode-light .post-card-body h2,
body.public-mode.color-mode-light .post-text-toggle {
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light .groups-page,
body.public-mode.color-mode-light .group-detail,
body.public-mode.color-mode-light .group-card-copy a,
body.public-mode.color-mode-light .group-members,
body.public-mode.color-mode-light .content-card-public h2,
body.public-mode.color-mode-light .content-card-public h3 {
    color: var(--cm-color-text);
}

body.public-mode.color-mode-light .groups-seo-intro,
body.public-mode.color-mode-light .group-card-copy p,
body.public-mode.color-mode-light .group-location,
body.public-mode.color-mode-light .content-card-public p,
body.public-mode.color-mode-light .content-card-public span {
    color: var(--cm-color-muted);
}

body.public-mode.color-mode-light .group-members {
    background: var(--cm-color-bg-soft);
}

body.public-mode.color-mode-light .choice-pill,
body.public-mode.color-mode-light .distance-pill,
body.public-mode.color-mode-light .age-box,
body.public-mode.color-mode-light .groups-search input {
    color: var(--cm-color-text);
    background: var(--cm-color-field);
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light .browse-filterbar,
body.public-mode.color-mode-light .posts-head,
body.public-mode.color-mode-light .groups-heading {
    border-color: var(--cm-color-line);
}

/* Chat defines its own semantic token family; map it to the global contract. */
body.public-mode.color-mode-light.messages-page {
    --cm-chat-bg: var(--cm-color-bg);
    --cm-chat-panel: var(--cm-color-surface);
    --cm-chat-panel-strong: var(--cm-color-surface-raised);
    --cm-chat-rail: var(--cm-color-surface);
    --cm-chat-line: var(--cm-color-line);
    --cm-chat-text: var(--cm-color-text);
    --cm-chat-muted: var(--cm-color-muted);
}

body.public-mode.color-mode-light .messages-shell,
body.public-mode.color-mode-light .messages-sidebar,
body.public-mode.color-mode-light .messages-thread,
body.public-mode.color-mode-light .messages-composer {
    color: var(--cm-color-text);
    background: var(--cm-color-surface);
    border-color: var(--cm-color-line);
}

body.public-mode.color-mode-light .messages-thread,
body.public-mode.color-mode-light .messages-search {
    background: var(--cm-color-surface-raised);
}

body.public-mode.color-mode-light .chat-bubble.received {
    background: var(--cm-color-surface);
}

body.public-mode.color-mode-light .chat-bubble.sent {
    background: #e7f0ff;
}

body.public-mode.color-mode-light .messages-contact:hover,
body.public-mode.color-mode-light .messages-contact.active {
    background: #eef4ff;
}

@media (max-width: 720px) {
    .appearance-mode-grid {
        grid-template-columns: 1fr;
    }

    .appearance-mode-card {
        grid-template-columns: 118px minmax(0, 1fr);
        justify-items: start;
        text-align: left;
    }

    .appearance-mode-card .appearance-preview {
        grid-row: span 2;
    }

    .appearance-mode-card small {
        min-height: 0;
        text-align: left;
    }

    body.public-mode.color-mode-light .public-mobile-nav-modern {
        color: var(--cm-color-text);
        background: var(--cm-color-surface);
        border-color: var(--cm-color-line);
    }

    body.public-mode.color-mode-light .public-mobile-nav-modern a {
        color: var(--cm-color-muted);
    }

    body.public-mode.color-mode-light .public-mobile-nav-modern a.active,
    body.public-mode.color-mode-light .public-mobile-nav-modern a:hover {
        color: var(--cm-color-text);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.public-mode,
    body.public-mode * {
        transition: none !important;
    }
}