/*
 * Final dark-theme layer.
 *
 * This file is intentionally loaded after every component stylesheet. New
 * components should use the semantic variables below instead of introducing
 * light-only background or text colors.
 */
html[data-theme="night"] {
  color-scheme: dark;
  --paper: #08111f;
  --panel: #111c2d;
  --surface: #111c2d;
  --white: #111c2d;
  --soft: #18263a;
  --surface-soft: #18263a;
  --ink: #edf4ff;
  --navy: #f3f7ff;
  --ink-soft: #bac9da;
  --muted: #a9b9cc;
  --line: #344860;
  --blue: #75b2ff;
  --cyan: #68e0e3;
  --gold: #f5cb68;
  --accent: #68e0e3;
  --success: #82e5b2;
  --warning: #f4cf78;
  --danger: #ffaaa3;
  --shadow: 0 24px 65px rgba(0, 0, 0, .38);
}

html[data-theme="night"],
html[data-theme="night"] body {
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="night"] :where(input, textarea, select) {
  border-color: var(--line);
  background: #0d1929;
  color: var(--ink);
}

:where(input, textarea)::placeholder {
  color: var(--ink, #102033);
  opacity: .5;
}

html[data-theme="night"] :where(input, textarea)::placeholder {
  color: var(--ink);
  opacity: .5;
}

html[data-theme="night"] :where(input, textarea, select):focus {
  border-color: var(--cyan);
  outline-color: rgba(104, 224, 227, .28);
  box-shadow: 0 0 0 3px rgba(104, 224, 227, .13);
}

html[data-theme="night"] select option {
  background: #0d1929;
  color: var(--ink);
}

html[data-theme="night"] select option:disabled {
  color: #7f91a6;
}

html[data-theme="night"] input:-webkit-autofill,
html[data-theme="night"] input:-webkit-autofill:hover,
html[data-theme="night"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px #0d1929 inset;
  caret-color: var(--ink);
}

html[data-theme="night"] :where(dialog, fieldset) {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

html[data-theme="night"] :where(hr) { border-color: var(--line); }
html[data-theme="night"] :where(th) { color: var(--ink); }
html[data-theme="night"] :where(td) { color: var(--ink-soft); }
html[data-theme="night"] :where(tr, th, td) { border-color: var(--line); }

html[data-theme="night"] :where(code):not(pre code) {
  background: #19283d;
  color: #a9e6ff;
}

html[data-theme="night"] :where(.portal_nav, .mobile_menu) {
  border-color: var(--line);
  background: rgba(8, 17, 31, .96);
  color: var(--ink);
}

html[data-theme="night"] :where(
  .portal_card, .workspace_card, .workspace_panel, .project_step_card,
  .identity_panel, .auth_panel, .auth_method_card, .auth_modal_card,
  .guideline_card, .guideline_article, .tutorial_card, .checklist_panel,
  .docs_card, .metric_card, .status_card, .file_panel, .source_panel,
  .domain_panel, .pricing_card, .fee_card, .storage_card, .calculator_card,
  .altcoin_card, .version_card, .snapshot_card, .manage_card,
  .push_card, .key_card, .wallet_card, .cost_card
) {
  border-color: var(--line);
  background-color: var(--panel);
  color: var(--ink);
}

html[data-theme="night"] :where(
  .node, .feature_card, .staging_panel, .roadmap_grid > div,
  .tutorial_feature, .guideline_grid article, .docs_categories a,
  .doc_note, .build_auth_panel, .account_button, .account_popover,
  .build_workspace, .workspace_action, .workspace_action_primary,
  .project_card, .cluster_card, .cluster_stats > div,
  .key_choice_button, .key_result, .key_warning, .self_ssl_tool,
  .ssl_node_choice, .identity_form, .domain_stage, .dns_mode_card,
  .nameserver_list code, .dns_live_status, .node_ip_panel,
  .node_ip_panel code, .wallet_funding_grid > div,
  .domain_checklist > div, .ssl_handoff, .funding_modal_card,
  .funding_source_result, .keys_funding_panel, .keys_funding_guidance
) {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

html[data-theme="night"] :where(
  .workspace_action, .project_card, .cluster_card, .ssl_node_choice,
  .dns_mode_card, .nameserver_list code, .dns_live_status,
  .wallet_funding_grid > div, .domain_checklist > div,
  .funding_source_result, .keys_funding_guidance
) { background: var(--soft); }

html[data-theme="night"] .workspace_action_primary {
  border-color: rgba(240, 171, 90, .46);
  background: linear-gradient(135deg, #352719, #282319);
}

html[data-theme="night"] :where(.key_warning, .doc_note, .ssl_handoff, .ssl_warning) {
  border-color: rgba(244, 207, 120, .4);
  background: #352d19;
  color: #f8dc98;
}

html[data-theme="night"] :where(.button_light, .docs_categories a) {
  border-color: var(--line);
  background: var(--soft);
  color: var(--ink);
}

html[data-theme="night"] :where(.button_light, .docs_categories a):hover {
  background: #22344c;
  color: #fff;
}

html[data-theme="night"] :where(
  .button_ghost, .secondary_button, .project_nav_item, .auth_method,
  .file_drop, .source_drop, .upload_drop, details, .table_wrap
) {
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="night"] :where(.button_ghost, .secondary_button):hover,
html[data-theme="night"] :where(.project_nav_item, .auth_method):hover,
html[data-theme="night"] :where(.file_drop, .source_drop, .upload_drop):hover {
  background: #1d2d44;
  color: #fff;
}

html[data-theme="night"] :where(
  .muted, .help_text, .field_help, .form_hint, .wallet_meta,
  .project_meta, .card_note, .empty_state, .last_checked,
  .version_meta, .snapshot_meta, .source_large_caption
) { color: var(--muted); }

/* Status colors need to remain legible without relying on pale day surfaces. */
html[data-theme="night"] :where(
  .status_ok, .status-ok, .is-success, .project_status,
  .identity_success, .source_import_success, .source_large_complete,
  .zip_workflow_stage_success, .storage_status_success,
  .domain_status_success, .push_status_success
) { color: var(--success); }

html[data-theme="night"] :where(
  .status_error, .status-error, .is-error, .auth_error,
  .workspace_error, .project_error, .identity_error,
  .source_import_error, .storage_status_error, .domain_status_error,
  .push_status_error, .field_error
) { color: var(--danger); }

html[data-theme="night"] :where(
  .warning, .warning_text, .status_warning, .project_warning,
  .source_warning, .storage_warning, .domain_warning
) { color: var(--warning); }

html[data-theme="night"] :where(
  .project_status, .success_panel, .source_large_complete,
  .domain_checklist_item.is-complete, .identity_result.is-success
) {
  border-color: rgba(82, 207, 153, .38);
  background: #123526;
}

html[data-theme="night"] :where(
  .error_panel, .danger_panel, .identity_result.is-error,
  .domain_checklist_item.is-error
) {
  border-color: rgba(255, 138, 130, .42);
  background: #3a1d25;
  color: #ffc0ba;
}

html[data-theme="night"] :where(
  .warning_panel, .notice_warning, .domain_warning,
  .source_warning, .storage_warning
) {
  border-color: rgba(244, 207, 120, .4);
  background: #352d19;
  color: #f8dc98;
}

/* Project navigation and workflow surfaces. */
html[data-theme="night"] .project_nav_item.is-active {
  border-color: #54708f;
  background: #1b2b41;
  color: #fff;
}

html[data-theme="night"] .project_nav_item.is-disabled { color: #8294aa; }
html[data-theme="night"] .project_nav_item.is-complete:not(.is-active) .project_nav_number {
  background: #15392b;
  color: #9bedc5;
}

html[data-theme="night"] :where(.key_progress_track, .manage_progress, .progress_track) {
  background: #27374d;
}

html[data-theme="night"] :where(.dev_site_domain, .dev_setup_progress, .dev_ssl_node) {
  border-color: var(--line);
  background: var(--soft);
  color: var(--ink);
}

html[data-theme="night"] .dev_setup_progress .is-complete > span,
html[data-theme="night"] .dev_ssl_node.is-installed > span { color: #8aebbc; }
html[data-theme="night"] .dev_setup_progress .is-working > span,
html[data-theme="night"] .dev_ssl_node.is-issuing > span,
html[data-theme="night"] .dev_ssl_node.is-pending > span,
html[data-theme="night"] .dev_ssl_node.is-waiting > span { color: #8ac7ff; }
html[data-theme="night"] .dev_setup_progress .is-error > span,
html[data-theme="night"] .dev_ssl_node.is-failed > span { color: #ffaaa3; }

html[data-theme="night"] #zip_workflow,
html[data-theme="night"] .zip_workflow_total_progress {
  border-color: var(--line);
  background: rgba(17, 28, 45, .97);
  color: var(--ink);
}

html[data-theme="night"] .zip_workflow_stage_row {
  border-color: var(--line);
  background: var(--soft);
  color: var(--ink);
}

html[data-theme="night"] .zip_workflow_stage_marker {
  border-color: #71849b;
  color: #c3d0df;
}

html[data-theme="night"] .zip_workflow_stage_row strong,
html[data-theme="night"] #zip_workflow_dev_complete span { color: var(--success); }
html[data-theme="night"] #zip_workflow_error { color: var(--danger); }

/* Version history and source comparison. */
html[data-theme="night"] :where(
  .version_file_group, .version_file_row, .version_file_list,
  .version_diff_panel, .version_diff_header, .version_diff_body,
  .version_unchanged_section, .version_deleted_section
) {
  border-color: var(--line);
  background-color: var(--surface);
  color: var(--ink);
}

html[data-theme="night"] .version_file_row:nth-child(even) { background: #142136; }
html[data-theme="night"] .version_diff_line.is-added { background: #153b2c; color: #b9f4d5; }
html[data-theme="night"] .version_diff_line.is-removed { background: #422128; color: #ffc1bb; }
html[data-theme="night"] .version_diff_line.is-context { color: #c1cede; }
html[data-theme="night"] .version_diff_gutter { color: #8da0b6; }
html[data-theme="night"] .version_file_section,
html[data-theme="night"] .version_diff_modal > section {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}
html[data-theme="night"] .version_file_section > summary { background: var(--soft); color: var(--ink); }
html[data-theme="night"] .version_diff_line.add { background: #153b2c; color: #b9f4d5; }
html[data-theme="night"] .version_diff_line.delete { background: #422128; color: #ffc1bb; }
html[data-theme="night"] .version_diff_line.delete > span { background: #522830; color: #ffd0cc; }

/* Storage, currencies, fees, and calculators. */
html[data-theme="night"] :where(
  .storage_location_current, .storage_node_card, .storage_cost_summary,
  .storage_policy_summary, .pricing_table, .currency_table,
  .cluster_info_table, .fee_table, .calculator_result,
  .wallet_balance_list, .wallet_balance_row
) {
  border-color: var(--line);
  background-color: var(--surface);
  color: var(--ink);
}

html[data-theme="night"] :where(.storage_node_card.is-selected, .pricing_table tr:hover) {
  background: #1a3040;
}

html[data-theme="night"] :where(.storage_node_cost, .storage_estimate, .fiat_value) {
  color: #c4e9ff;
}

html[data-theme="night"] .storage_validation_error {
  border-color: rgba(255, 138, 130, .45);
  background: #3a1d25;
  color: #ffc0ba;
}

html[data-theme="night"] :where(
  .contract_test_console input, .contract_test_console textarea,
  .field_grid input, .publish_form input, .publish_form textarea,
  .contract_version select, #altcoin_certificate, #schema_text,
  .file_toolbar, .file_toolbar button, .file_upload_button,
  .contract_library_download_grid a, .file_workspace_split,
  .build_output, .build_output > div, .build_output > div button,
  .version_save input, .version_item, .source_zip_layout > div,
  .source_large_table, .source_next_steps, .source_next_step,
  .push_status_bar, .push_provider_card, .push_details_card,
  .push_help_dialog, .altcoin_confirm_dialog, .custom_keys_panel,
  .custom_key_row, .storage_location_loading,
  .storage_policy_summary > div, .storage_all_nodes,
  .storage_node_row, .storage_extra_panel, .altcoin_policy_grid > label,
  .contract_native_currency select
) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="night"] :where(
  .file_toolbar, .source_zip_layout > div, .source_next_steps,
  .push_status_bar, .custom_keys_panel, .storage_location_loading,
  .storage_policy_summary > div, .storage_extra_panel,
  .altcoin_policy_grid > label
) { background: var(--soft); }

html[data-theme="night"] :where(
  .push_provider_card input:not([type="checkbox"]),
  .push_provider_card textarea, .push_form_grid input,
  .altcoin_description_field textarea, .custom_key_form input,
  .storage_extra_fields input
) {
  border-color: var(--line);
  background: #0d1929;
  color: var(--ink);
}

html[data-theme="night"] :where(.storage_extra_error, .dns_record_remove) {
  border-color: rgba(255, 138, 130, .42);
  background: #3a1d25;
  color: #ffc0ba;
}

html[data-theme="night"] .dns_record_remove:hover { background: #51262d; color: #fff; }
html[data-theme="night"] :where(.guideline_grid .guideline_card, .guideline_article) {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}
html[data-theme="night"] .guideline_conclusion {
  border-color: rgba(244, 207, 120, .38);
  background: #352d19;
  color: #f8dc98;
}

/* Tokenomics was originally a light-only feature area. */
html[data-theme="night"] :where(
  .tokenomics_status, .tokenomics_stage, .tokenomics_allocation,
  .tokenomics_contract, .tokenomics_contract_head,
  .tokenomics_rule_list span, .tokenomics_execution > span,
  .tokenomics_final_summary
) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="night"] .tokenomics_status > * { background: var(--soft); color: var(--ink); }
html[data-theme="night"] .tokenomics_stage { background: #142136; }
html[data-theme="night"] .tokenomics_contract_head,
html[data-theme="night"] .tokenomics_rule_list span,
html[data-theme="night"] .tokenomics_execution > span { background: #1a293e; }
html[data-theme="night"] .tokenomics_warning {
  border-color: rgba(244, 207, 120, .42);
  background: #382e18;
  color: #f8dc98;
}
html[data-theme="night"] .tokenomics_success {
  border-color: rgba(82, 207, 153, .38);
  background: #123526;
  color: #a8efcd;
}
html[data-theme="night"] .tokenomics_failed {
  border-color: rgba(255, 138, 130, .42);
  background: #3a1d25;
  color: #ffc0ba;
}

/* Destructive project controls use a restrained red surface in night mode. */
html[data-theme="night"] :where(
  .manage_name_form, .execution_payer_box, .manage_section,
  .manage_identity_row, .manage_identity_empty, .manage_action_note,
  .manage_rent_table, .manage_rent_column_heading, .manage_confirmation
) {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="night"] :where(
  .manage_identity_row, .manage_identity_empty,
  .manage_action_note, .manage_rent_column_heading
) { background: var(--soft); }

html[data-theme="night"] :where(.manage_blockers, .manage_confirmation) {
  border-color: rgba(255, 138, 130, .4);
  background: #351d24;
  color: #ffc0ba;
}

html[data-theme="night"] :where(.manage_name_form input, .manage_confirmation input) {
  border-color: var(--line);
  background: #0d1929;
  color: var(--ink);
}

/* Keep disabled controls clear while making their state unmistakable. */
html[data-theme="night"] :where(button, .button):disabled,
html[data-theme="night"] :where(button, .button)[aria-disabled="true"] {
  color: #a2afbf;
  opacity: .68;
}

@media (forced-colors: active) {
  html[data-theme="night"] :where(input, textarea, select, button, dialog, details) {
    forced-color-adjust: auto;
  }
}
