/*
 * Generator dark-mode contrast layer.
 *
 * This file is loaded after the selected visual-language stylesheet so its
 * dark tokens cannot be replaced by light-only Material, Brutalism,
 * Neumorphism, Claymorphism, or Fluent declarations.
 */
html[data-rocos-theme="dark"] body .rs-studio {
    --rs-dark-accent: #a997ff;
    --rs-dark-accent-ink: #17191d;
    color: #f7f4ed;
    background: #17191d;
}

html[data-rocos-theme="dark"] body .rs-studio[data-generator="material"] {
    --rs-dark-accent: #d0bcff;
}

html[data-rocos-theme="dark"] body .rs-studio[data-generator="brutalism"] {
    --rs-dark-accent: #ffd500;
}

html[data-rocos-theme="dark"] body .rs-studio[data-generator="neumorphism"] {
    --rs-dark-accent: #aec0ff;
}

html[data-rocos-theme="dark"] body .rs-studio[data-generator="claymorphism"] {
    --rs-dark-accent: #ffad8b;
}

html[data-rocos-theme="dark"] body .rs-studio[data-generator="fluent"] {
    --rs-dark-accent: #75c2ff;
}

html[data-rocos-theme="dark"] body .rs-studio :is(
    .rs-studio-title,
    .rs-panel-title,
    .rs-component-option-title,
    .rs-control-label,
    .rs-control-value
) {
    color: #f7f4ed;
}

html[data-rocos-theme="dark"] body .rs-studio .rs-studio-intro,
html[data-rocos-theme="dark"] body .rs-studio .rs-component-count,
html[data-rocos-theme="dark"] body .rs-studio .rs-code-note {
    color: #d7d6d1;
}

html[data-rocos-theme="dark"] body .rs-studio :is(.rs-section-kicker, .rs-panel-kicker) {
    color: var(--rs-dark-accent);
}

html[data-rocos-theme="dark"] body .rs-studio :is(
    .rs-component-browser,
    .rs-workbench,
    .rs-controls,
    .rs-style-control-panel,
    .rs-component-option-panel,
    .rs-preview-panel,
    .rs-preview-toolbar,
    .rs-code-dock
) {
    color: #f7f4ed;
    background: #202228;
    border-color: rgba(247, 244, 237, .22);
}

html[data-rocos-theme="dark"] body .rs-studio :is(.rs-preset-group, .rs-device-options) {
    background: #17191d;
    border-color: rgba(247, 244, 237, .22);
}

html[data-rocos-theme="dark"] body .rs-studio :is(
    .rs-preset,
    .rs-device-button,
    .rs-category-tab,
    .rs-component-browser .rs-component-tab,
    .rs-icon-button,
    .rs-component-carousel-button,
    .rs-component-search,
    .rs-component-select,
    .rs-color-input,
    .rs-download-button,
    .rs-output-toggle
) {
    color: #ece9e2;
    background: #292c32;
    border-color: rgba(247, 244, 237, .28);
}

html[data-rocos-theme="dark"] body .rs-studio :is(
    .rs-preset,
    .rs-device-button,
    .rs-category-tab,
    .rs-component-browser .rs-component-tab
).is-active {
    color: var(--rs-dark-accent-ink);
    background: var(--rs-dark-accent);
    border-color: var(--rs-dark-accent);
}

html[data-rocos-theme="dark"] body .rs-studio .rs-component-browser .rs-component-tab > span,
html[data-rocos-theme="dark"] body .rs-studio .rs-component-browser .rs-component-tab small {
    color: #d7d6d1;
}

html[data-rocos-theme="dark"] body .rs-studio .rs-component-browser .rs-component-tab.is-active > span,
html[data-rocos-theme="dark"] body .rs-studio .rs-component-browser .rs-component-tab.is-active small {
    color: var(--rs-dark-accent-ink);
}

html[data-rocos-theme="dark"] body .rs-studio .rs-component-search input,
html[data-rocos-theme="dark"] body .rs-studio .rs-component-select {
    color: #f7f4ed;
}

html[data-rocos-theme="dark"] body .rs-studio .rs-component-search input::placeholder {
    color: #c6c5c0;
    opacity: 1;
}

html[data-rocos-theme="dark"] body .rs-studio .rs-range {
    --range-track: #6f737d;
    --range-fill: var(--rs-dark-accent);
}

html[data-rocos-theme="dark"] body .rs-studio .rs-range::-webkit-slider-thumb {
    background: var(--rs-dark-accent);
    border-color: #202228;
}

html[data-rocos-theme="dark"] body .rs-studio .rs-range::-moz-range-thumb {
    background: var(--rs-dark-accent);
    border-color: #202228;
}

html[data-rocos-theme="dark"] body .rs-studio .rs-code-dock :is(.rs-panel-title, .rs-code-tab, .rs-code-note) {
    color: #d7d6d1;
}

html[data-rocos-theme="dark"] body .rs-studio .rs-code-dock .rs-code-tab {
    background: transparent;
    border-color: transparent;
}

html[data-rocos-theme="dark"] body .rs-studio .rs-code-dock .rs-code-tab.is-active {
    color: var(--rs-dark-accent);
}

html[data-rocos-theme="dark"] body .rs-studio .rs-code-dock .rs-code-tab.is-active::after {
    display: block;
    background: var(--rs-dark-accent);
}

html[data-rocos-theme="dark"] body .rs-studio .rs-code-dock .rs-copy-button {
    color: var(--rs-dark-accent-ink);
    background: var(--rs-dark-accent);
    border-color: var(--rs-dark-accent);
}

html[data-rocos-theme="dark"] body .rs-studio .rs-code-dock .rs-code-block {
    color: #ece9e2;
    background: #111317;
    border-color: rgba(247, 244, 237, .22);
}

html[data-rocos-theme="dark"] body .rs-studio .rs-code-dock .rs-code-note {
    background: #292c32;
    border-color: rgba(247, 244, 237, .22);
}

html[data-rocos-theme="dark"] body .rs-studio .rs-valid-badge {
    color: #b9f6ce;
}

html[data-rocos-theme="dark"] body .rs-studio .rs-valid-dot {
    background: #65d995;
}

/* Keep each visual language recognizable while using dark-compatible layers. */
html[data-rocos-theme="dark"] body .rs-brutalism-studio {
    --rb-page-bg: #17191d;
    --rb-surface: #202228;
    --rb-surface-alt: #292c32;
    --rb-ink: #f7f4ed;
    --rb-line: #f7f4ed;
    --rb-accent: #ffd500;
    --rb-shadow-hard: 8px 8px 0 #ffd500;
}

html[data-rocos-theme="dark"] body .rs-brutalism-studio .rs-code-dock .rs-code-tab.is-active {
    color: var(--rs-dark-accent-ink);
    background: var(--rs-dark-accent);
    border-color: #f7f4ed;
}

html[data-rocos-theme="dark"] body .rs-brutalism-studio .rs-code-dock .rs-code-tab.is-active::after {
    display: none;
}

html[data-rocos-theme="dark"] body .rs-neumorphism-studio :is(.rs-component-browser, .rs-workbench, .rs-code-dock) {
    box-shadow: -10px -10px 24px #292c32, 10px 10px 24px #0d0f12;
}

html[data-rocos-theme="dark"] body .rs-neumorphism-studio :is(
    .rs-preset,
    .rs-device-button,
    .rs-category-tab,
    .rs-component-browser .rs-component-tab,
    .rs-icon-button,
    .rs-component-carousel-button,
    .rs-component-search,
    .rs-component-select,
    .rs-color-input
) {
    box-shadow: -5px -5px 12px #2c2f35, 5px 5px 12px #0d0f12;
}

html[data-rocos-theme="dark"] body .rs-claymorphism-studio :is(.rs-component-browser, .rs-workbench, .rs-code-dock) {
    box-shadow: inset -8px -8px 20px rgba(0, 0, 0, .18), inset 8px 8px 20px rgba(255, 255, 255, .04), 0 18px 38px rgba(0, 0, 0, .24);
}

/* Guide marker text must stay dark on every light or mid-tone style marker. */
html[data-rocos-theme="dark"] body .rs-glass-guide[data-guide-style] :is(
    .rs-guide-card-index,
    .rs-check-icon,
    .rs-workflow-number
) {
    color: #17191d;
}